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下面就可以看到
![](https://images.cnblogs.com/cnblogs_com/litao229/1.jpg)
而在firefox 下面, 就出现了我们遇到的问题,和我们的设计不同了,
![](https://images.cnblogs.com/cnblogs_com/litao229/2.jpg)
这里,先说为什么会出现这样的情况, 记的那时候找的资料看过《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 会阻止其子元素的边距伸出包含容器之外。非法扩建领导办公室。
遇到过这样的问题,然后在网上搜罗了一些资料后解决了,然后这里写点我的心得给大家
我很长一段时间里一直也都认为这是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下面就可以看到
![](https://images.cnblogs.com/cnblogs_com/litao229/1.jpg)
而在firefox 下面, 就出现了我们遇到的问题,和我们的设计不同了,
![](https://images.cnblogs.com/cnblogs_com/litao229/2.jpg)
这里,先说为什么会出现这样的情况, 记的那时候找的资料看过《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 会阻止其子元素的边距伸出包含容器之外。非法扩建领导办公室。