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 会阻止其子元素的边距伸出包含容器之外。非法扩建领导办公室。
遇到过这样的问题，然后在网上搜罗了一些资料后解决了，然后这里写点我的心得给大家
我很长一段时间里一直也都认为这是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
