Firefox，IE8中margin-top屬性bug解決方案
作者：royfantasy
CSS中的margin屬性有很多值得學(xué)習(xí)的地方，本文向大家介紹一下Firefox，IE8中margin-top的bug及解決辦法，相信你一定會(huì)感興趣。
本文和大家重點(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"> </div>
2.把黑色的div加入padding-top屬性代替margin-top
3.第一種最好，第二種不錯(cuò)，第三種不太推薦，就是在黑色div加入屬性border等于1px,記得也要加入solid哦
【編輯推薦】
- DIV+CSS網(wǎng)頁(yè)布局五大誤區(qū)
- DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性
- CSS屬性font-size用法詳解
- 探究采用DIV+CSS框架的利與弊
- DIV CSS網(wǎng)頁(yè)布局需要掌握的八大技巧
責(zé)任編輯：佚名
來(lái)源：
hi.baidu.com
