margin邊距碰撞

記得以前在看《CSS實踐手冊》的時候，看到過“邊距碰撞”這樣的例子與解釋。自己大概記得是這樣說的： 

 當兩個具有margin-top或margin-bittom的塊元素垂直排列在一個父類的塊元素裏面的時候，邊距的算法在不同的瀏覽器是算法略有不同。在IE6中，一般都是取margin比較小一個作爲兩個塊元素的margin。解決辦法就是用padding替代margin。

我以自己不會遇到這樣的情況，沒想到今天在寫頁面的時候，自己測試瀏覽器時發現Maxthon出現了這樣的問題。其它的都沒有這樣的現象，邊ie6都沒有。真鬱悶死我了。一開始自己還沒有想到是邊距碰撞的問題，自己就加上背景色來調試。調試了好久都有效果。後來纔想到邊距的問題。下面是下精簡版，好讓自己在以定頁面的時候能快速的解決類似的問題。

xhtml代碼：

<div id="hotelFram">
        <div class="hotelCate">
            <div class="FeaturedHotels" id="InternationalHotel">
                <p class="p1">1這裏是垂直下來的第一個div，叫作InternationalHotel！底部有一個屬性是:margin-bottom:10px;</p>
                <p class="p2">2</p>
                <p class="p3">3</p>
                <p class="p4">4</p>
                <p class="p5">5</p>
            </div>

            <div class="FeaturedHotels" id="DomesticHotels">
                <p class="p6">6這裏是垂直下來的第二個div，叫作DomesticHotels！底部有一個屬性是:margin-bottom:10px;</p>
                <p class="p7">7</p>
                <p class="p8">8</p>
            </div>
        </div>
        <div class="hotelAd">
            <p>這裏主要是廣告、雜七雜八的</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>

    </div>

    <div id="ShareNews">
        <div class="shareFrame floatLeft">
            <p class="p9">9這裏是shareFram,向左浮動的！目的是讓兩個DIV能在同一列顯示</p>
            <p class="p10">10</p>
            <p class="p11">11</p>
            <p class="p12">12</p>
        </div>
        <div class="newsFrame floatRight">
            <p class="p13">13這裏是newsFrame,向右浮動的！目的是讓兩個DIV能在同一列顯示</p>
            <p class="p14">14</p>
            <p class="p15">15</p>
            <p class="p16">16</p>
        </div>
    </div>

 

css代碼：

 

*{ margin:0px; padding:0px; font-size:12px; }
.floatRight { float:right; }
.floatLeft {float:left; }
#hotelFram { width:990px; margin:10px auto 0px; overflow:hidden; background:#999; }
    .hotelCate { width:770px; float:left; overflow:auto; }
    .hotelAd { width:200px; float:right; background:#F9C; }
    .FeaturedHotels { float:left; width:770px; margin-bottom:10px; overflow:hidden; }
#ShareNews { width:990px; margin:0px auto; overflow:hidden; background:#CCC; }
    .shareFrame { width:590px; overflow:hidden; background:#930; }
    .newsFrame { width:390px; overflow:hidden; background:#FF0; }
#InternationalHotel { background:#0F0; }
#DomesticHotels { background:#0F0; }
.p1 { background:#90F; }
.p2 { background:#96F; }
.p3 { background:#99F; }
.p4 { background:#9CF; }
.p5 { background:#9FF; }
.p6 { background:#C0F; }
.p7 { background:#C6F; }
.p8 { background:#C9F; }
.p9 { background:#CCF; }
.p10 { background:#CFF; }
.p11 { background:#F0F; }
.p12 { background:#F6F; }
.p13 { background:#F9F; }
.p14 { background:#FCF; }
.p15 { background:#FFF; }
.p16 { background:#33C; }

 

出現的效果大致如下：

FF效果

IE效果：

Maxthon效果：

解決辦法就是將margin-bottom:10px; 換成padding-bottom:10px;搞定！

修改之後的Maxthon效果：