css2.1中 firefox 与IE 对margin-top的不同解释
（一）margin-top失效??
?? 先看下面代碼：<div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
</div>
??兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設置box2的上邊距 margin-top沒有效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.Poluoluo.com</title> <style type="text/css"> <!-- * { margin:0; padding:0; } .box1{ float:left; width:500px; height:100px; background:#999; } .box2{ margin-top:20px; width:500px; height:50px; background:#000; color:#fff; clear:both; } --> </style> </head> <body> <div> <div class="box1" >float:left</div> <div class="box2">clear:both; margin-top:20px;</div> </div> </body> </html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
?網上能找到的兩種比較靠譜的解釋：1：“在css2.1中，水平的margin不會被折疊；垂直margin可能在一些盒模型中被折疊…”2：當第一個層浮動，而第二個沒浮動層的margin會被壓縮，詳見--浮動元素后非浮動元素的margin的處理（地址）。
得到解決問題思路：要浮動一起浮動，要就一起不浮動。
解決辦法：
1.box2增加float屬性
2.box1與box2之間增加一層"<div style="clear:both;"></div>"
??（二）子元素設置margin-top作用于父容器
<div class="box" style="height:100px;background:red;">
??<div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>
當給box2設置margin-top時，在FF下僅作用于父容器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.Poluoluo.com.com</title> <style type="text/css"> <!-- * { margin:0; padding:0; } .box2{ margin-top:20px; width:500px; height:50px; background:#000; color:#fff; } --> </style> </head> <body> <div class="box" style="height:100px;background:red;"> <div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div> </div> </body> </html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
解決辦法：
1.給父容器box加overflow:hidden;屬性
2.父容器box加border除none以外的屬性
3.用父容器box的padding-top代替margin-top
轉載于:https://www.cnblogs.com/bluers/archive/2012/09/02/2667465.html
總結
以上是生活随笔為你收集整理的css2.1中 firefox 与IE 对margin-top的不同解释的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Popupwin结合Timer实现定时弹
- 下一篇： ecshop 奇偶行显示不同的商品样式