又到了利用碎片學習的時間了，看看這個兼容性的小案例，前端開發者經常遇到的問題:margin-top在IE6/7下失效。

一個塊級元素，觸發了hasLayout（比如設置了寬度高度），并且其前面緊挨著的同級的節點如果為absolute絕對定位，就會導致這個塊級元素在IE6/IE7下面的margin-top失效，看起來就像margin-top:0一樣。

正常瀏覽器：

在IE6/7下的效果：

原因是：序號那一欄被頂上去了，原因是“猜冠軍”是絕對定位。

解決辦法有以下：

1.使用padding來代替margin，比如設置其父元素的padding-top，或者設置這個塊元素的padding-top，不過要注意padding對其背景的影響。（這個方法還是治標不治本）。

2.使這個塊不直接跟在前面的這個絕對定位元素后面，比如在它們之間插入一個空div標簽。

3.交換這兩個標簽的前后位置。

前端愛好者們約定，閱讀后：

if（‘覺得有用’）

｛

分享給朋友（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享給朋友（‘a piece of cake！’）;

｝

else if('看不懂')

{

回復小編（'help me!'）;

}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css兼容性案例：margin-top在IE6/7下失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。