Question

有谁可以告诉我为什么第二个div的100px上边距出现在最新版本的Chrome，Firefox，Opera和Safari中，但是没有出现在IE 7中？

<!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>

Answer 1

我无法解释第二个代码。但是如果你想让它成为第一个工作的代码，你可以将float添加到第二个div。

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

Answer 2

我猜它是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。

为什么这个顶级利润在IE中消失了？

2 个答案: