爲什麼這個頂部邊距在IE中消失？

任何人都可以告訴我爲什麼Chrome瀏覽器，Firefox，Opera和Safari的最新版本中出現第二個div的100px頂部邊距，但沒有出現在IE 7中？爲什麼這個頂部邊距在IE中消失？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<body> 
<div style="position:absolute; top:0px; left:0px; height:99px; width:100px; border:1px solid #000000"></div> 
<div style="margin-top:100px; height:200px; width:100px; border:1px solid #000000"></div> 
</body 
</html>

此外，任何人都可以告訴我爲什麼切換我介紹的div元素的順序修復了問題？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<body> 
<div style="margin-top:100px; height:200px; width:100px; border:1px solid #000000"></div> 
<div style="position:absolute; top:0px; left:0px; height:99px; width:100px; border:1px solid #000000"></div> 
</body 
</html>

來源

2011-02-23 zjmiller

我會想這是在IE6/7 hasLayout的錯誤。 hasLayout由第二個div中的寬度或高度觸發。從第二個div刪除寬度和高度：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<body> 
<div style="position:absolute; top:0px; left:0px; height:99px; width:100px; border:1px solid #000000"></div> 
<div style="margin-top:100px; border:1px solid #000000"></div> 
</body 
</html>

現在你有一個全新的問題，但我相信你會看到第二個div的margin-top工作。

來源

2011-02-23 04:32:55

謝謝！如果我從第二個div中刪除高度和寬度，問題就會像你預測的那樣消失。如果我再加回來，問題就會回來。我猜如果我更瞭解hasLayout的工作原理，我會理解爲什麼包含這兩個div的順序會有所不同。 – zjmiller 2011-02-23 04:45:20

我不會擔心太多。在野外有很多解決方法，我認爲這個bug在IE8中是固定的。 – 2011-02-23 05:23:19

我無法解釋第二個代碼。但是如果你想讓它成爲第一個工作的代碼，你可以將float左移到第二個div。

<div style="margin-top:100px; height:200px; width:100px; border:1px solid #000000;float:left;"></div>

來源

2011-02-23 04:03:05 Zayar

爲什麼這個頂部邊距在IE中消失？

回答

相關問題