一起CSS

当前位置:一起CSS > CSS > 文章正文

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”的评论。

查看:985 评论:7 标签:

随机日志

共有 7 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved