您的位置：首页 > 运维架构

IE8下margin-top失效

2012-07-28 10:19 232 查看

今天看了篇清除浮动的文章，自己练习的时候发现在IE8下面div的margin-top设置了根本不起作用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
.box1{
background:#900;
width:200px;
height:200px;
margin:20px 0 0 20px;
float:left;
}
.box2{
background:#009;
width:300px;
height:200px;
margin:20px 0 0 20px;
float:left;
}
.box3{
background:#099;
width:520px;
height:200px;
margin:20px 0 0 20px;
clear:left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

在IE8和FF下显示效果都如下所示：

这样box3的margin-top设置就无效了。

若在box2和box3之间增加一层，并设置style属性

<div class="clear" style="clear:both;"></div>

这样FF里面显示正常，但在IE8下面margin-tp还是失效。

查找网上的解释是：

1）在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠；

2）当第一个层浮动，而第二个没浮动层的margin会被压缩。

解决思路是：要浮动一起浮动，要就一起不浮动。所以需要在box3中添加float属性。

正常显示如下：

（参考：点击打开链接）

发现网上还提到了另外一种margin-top失效的案例。即子元素的margin-top作用于父元素了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
.box1{
background:#900;
width:300px;
height:300px;
}
.box2{
background:#009;
width:200px;
height:200px;
margin:20px 0 0 20px;
}
</style>
</head>
<body>
<div id="" class="box1">
<div id="" class="box2">
</div>
</div>
</body>
</html>

结果显示为：

解决办法如下（参考：点击打开链接）：

1）给父元素box1加overflow:hidden;属性

2）父元素box1加border除none以外的属性

3）用父元素box1的padding-top代替margin-top
正常显示结果：

看的也不是很明白为什么这么做就可以，原理是什么？继续研究(*^__^*)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航