Why does this top margin disappear in IE?_问答_开发者

Why does this top margin disappear in IE?

开发者 https://www.devze.com 2023-02-12 14:32 出处：网络

Can anyone tell me why the 100px top margin of the second div appears in the latest versions of Chrome, Firefox, Opera, and开发者_如何学运维 Safari, but doesn’t appear in IE 7?

相关专题：css

Can anyone tell me why the 100px top margin of the second div appears in the latest versions of Chrome, Firefox, Opera, and开发者_如何学运维 Safari, but doesn’t appear in 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>

Also, can anyone tell me why switching the order in which I introduce the div elements fixes the problem?

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

I'm going to guess it's a hasLayout bug in IE6/7. hasLayout is triggered by width or height in the second div. Remove width and height from the second 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>

Now you have a whole new problem, but I believe you will see the second div margin-top working.

I cannot explain the second code. But if you want to make it the first code to work, you can add float left to second div.

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