Why does this top margin disappear in IE?
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>
加载中,请稍侯......
精彩评论