本文和大家重點(diǎn)討論一下Firefox，IE8中margin-top的bug及解決辦法，在Firefox，IE8這兩個(gè)瀏覽器中，有兩個(gè)嵌套關(guān)系的div，如果外層div的父元素padding值為0，那么內(nèi)層div的margin-top或者margin-bottom的值會(huì)“轉(zhuǎn)移”給外層div。

Firefox，IE8中margin-top的bug及解決辦法

在Firefox，IE8這兩個(gè)瀏覽器中，有兩個(gè)嵌套關(guān)系的div，如果外層div的父元素padding值為0，那么內(nèi)層div的margin-top或者margin-bottom的值會(huì)“轉(zhuǎn)移”給外層div。

以上邊緣為例：

<divstyledivstyle="background-color:green;color:white;">綠色</div> 
<divstyledivstyle="background-color:black;height:300px;padding-top:0px;"> 
 
<divstyledivstyle="background-color:black;height:300px;"> 
<!--解決方法代碼start--><!--解決方法代碼end--> 
<divstyledivstyle="margin-top:50px;height:150px;background-color:red;color:white;">紅色</div> 
</div> 
</div> 

在Firefox和IE8中綠色和紅色div之間會(huì)有50px的白色空隙，而在IE中則為黑色。

解決方法有這么幾種，下面我只列出3種：

1.在注釋那里插入一個(gè)非空的元素<divstyle="height:0px">&nbsp;</div>

2.把黑色的div加入padding-top屬性代替margin-top

3.第一種最好，第二種不錯(cuò)，第三種不太推薦，就是在黑色div加入屬性border等于1px,記得也要加入solid哦

【編輯推薦】

1. DIV+CSS網(wǎng)頁布局五大誤區(qū)
2. DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性
3. CSS屬性font-size用法詳解
4. 探究采用DIV+CSS框架的利與弊
5. DIV CSS網(wǎng)頁布局需要掌握的八大技巧