IE和FF下的margin-top

日期：2008-08-13 分类：CSS

由于垂直 margin 会出现叠加的现象，（如果你还不太了解垂直 margin 叠加的原理，请查看margin叠加原理）所以有些情况下 margin-top 在 IE 和 FF 会出现不同的现象。如下面的代码：

<div id="box">
	<div id="son"></div>
</div>

* { margin:0; padding:0;}
#box { width:500px; height:400px; margin:0 auto; background:#ccc;}
#son { width:500px; height:300px; margin-top:20px; background:#f00;}

查看Demo

在 IE 里，出现我们希望的效果，而在 FF 里，却没有。子盒子 #son 没有出现 margin-top:20px 的效果，反而父盒子 #box 出现了 margin-top:20px 的效果，也就是我们给子盒子设的 margin-top:20px 属性出现在父盒子里了。

怎么解决呢？最好的办法是用父盒子的 padding-top 代替子盒子的 margin-top，详细代码如下：

* { margin:0; padding:0;}
#box { width:500px; height:400px; margin:0 auto; padding-top:20px; background:#ccc;}
#son { width:500px; height:300px; background:#f00;}

查看Demo

还有其他方法，但和上面的比较更麻烦，就不介绍了。。。

=======华丽的分割线=========================================

读者“vampire”在评论中说为父元素设置 overflow 属性也可以解决此问题。经测试，为父元素设置 overflow 属性，值为 hidden 或 auto 都能解决此问题，而且这种方法似乎更容易理解，更符合本意。感谢“vampire”的评论。

查看：4,232 评论：7 标签：margin-top