firefox 和 chorme 下面 margin-top 出错的解决

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

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 会阻止其子元素的边距伸出包含容器之外。非法扩建领导办公室。

 

这里在网上找了些，以前用<br style="line-height:0"/>来解决，这个方法不太好，在chorme中高度不一样！建议不用!