又到了利用碎片學(xué)習(xí)的時(shí)間了，看看這個(gè)兼容性的小案例，前端開發(fā)者經(jīng)常遇到的問題:margin-top在IE6/7下失效。

一個(gè)塊級(jí)元素，觸發(fā)了hasLayout（比如設(shè)置了寬度高度），并且其前面緊挨著的同級(jí)的節(jié)點(diǎn)如果為absolute絕對(duì)定位，就會(huì)導(dǎo)致這個(gè)塊級(jí)元素在IE6/IE7下面的margin-top失效，看起來就像margin-top:0一樣。

正常瀏覽器：

在IE6/7下的效果：

原因是：序號(hào)那一欄被頂上去了，原因是“猜冠軍”是絕對(duì)定位。

解決辦法有以下：

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

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

3.交換這兩個(gè)標(biāo)簽的前后位置。

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

if（‘覺得有用’）

｛

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

｝

else if（‘已了解’）

｛

分享給朋友（‘a(chǎn) piece of cake！’）;

｝

else if('看不懂')

{

回復(fù)小編（'help me!'）;

}

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。