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

遇到过这样的问题,然后在网上搜罗了一些资料后解决了,然后这里写点我的心得给大家

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

上下两个垂直接触的div 。 head 和content吧。 在ie下面是好的,为什么是好的,最后在交代,这里先说出了问题的firefox
<div style="width:200px;height:100px;border:1px solid red;">head</div>
  <div style="width: 200px; height: 100px;background:red; ">
    <div style="margin: 20px; width: 100px; height: 50px; background-color: rgb(102, 102, 102);"/>
       content
  </div>

正常的情况如下,在ie下面就可以看到


而在firefox 下面, 就出现了我们遇到的问题,和我们的设计不同了,

这里,先说为什么会出现这样的情况, 记的那时候找的资料看过《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结果都是一样的

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

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

其他的解决方法也还有很多。比如 在content没有border or padding的情况下
1,给子元素设置position:absolute
2,  给content设置display:inline-block;   /*事实上 这个属性在firefox下面是无效的,可是为什么却能起到效果呢。我不得其解啊,在事实上,我最开始的解决方案就是用这个,惭愧啊。解决了都不知道为什么 哪个帮忙解决下*/
3,  给content设置overflow:hidden;    /*这样的限制性 也是地球人都知道的 ,解决问题的原因, 很遗憾的我也不晓得,哪个帮忙解决下*/



现在说下我理解的为什么ie中不会出现这样的问题
在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了:似乎拥有 layout 会阻止其子元素的边距伸出包含容器之外。非法扩建领导办公室。
 posted on 2009-06-04 20:33 落叶满长沙 阅读(...) 评论(...) 编辑 收藏