关注前端开发微信微信号web007007

firefox/IE8+下margin-top绑架父节点的margin的分析

作者 管理员 发布时间 2012-06-27 01:51 文章分类 DIV&CSS 文章评论 抢沙发 阅读次数

margin-top在firefox中会绑架父节点的margin,通俗点说呢,就是子节点的margin-top 设置,有些情况下会被传递给了父节点的margin-top。本来head 和content 在设计的语意上来说,是两上下相邻的。而结果却content节点却被子节点margin-top绑架.问题就这样来了。

很长一段时间里一直也都认为这是firefox的一个bug,但是最近看过一些资料后在想起这事情,其实这是很正常的。

上下两个垂直接触的div , head 和content吧。 在ie6~7下面是好的,为什么是好的,最后在交代,这里先说出了问题的firefox


<div id="head">head</div>
<div id="content">
<div id="son">
子节点
</div>
</div>

正常的情况如下,在ie6~7下面就可以看到:

firefox/IE8+下margin-top绑架父节点的margin的分析

而在firefox与IE8+ 下面, 就出现了我们遇到的问题:

firefox/IE8+下margin-top绑架父节点的margin的分析

这里,先说为什么会出现这样的情况, 《on having layout》一文中对这个的描述是这样的

【hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠】

这让我想起开始的时候我给content设置过一个border:1px solid color;的时候没有出现这个问题的。而我由此引申 给content加上一个padding-top:1px ;同样,问题解决。

元素的margin edge 只要一碰到其他元素的margin edge 就会发生重叠,重叠的结果,就是margin大的值。上面的代码里面,不设置content的margin 和设置content的,<=content.style.margin-top结果都是一样的

son元素的margin如果碰不到父元素有效的border或者padding.就会不断一层一层的找自己领导的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行,太过分了。

而很多时候需求上不需要使用border. 那么设置 个 padding-top:1px 来阻止 子元素margin-top的嚣张 应该是比较理想的方案。

其他的解决方法也还有很多。比如 在content没有border or padding的情况下
1,给子元素设置position:absolute
2, 给content或son设置display:inline-block;
3, 给content设置overflow:hidden;

现在说下我理解的为什么IE6~7中不会出现这样的问题
在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了:似乎拥有 layout 会阻止其子元素的边距伸出包含容器之外。非法扩建领导办公室。

本文固定链接: http://www.web92.net/498.html | WEB前端开发

该日志由 于2012年06月27日发表在 DIV&CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: firefox/IE8+下margin-top绑架父节点的margin的分析 | WEB前端开发