今天小编跟大家讲解下有关DIV多层嵌套margin-top的BUG问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关DIV多层嵌套margin-top的BUG问题 的相关资料，希望小伙伴们看了有所帮助。
今天在做登录页面的时候发现个margin-top的bug ;
初始代码如下：
html:
复制代码代码如下:<div class="logo"></div> <div class="login_text"> <div id="error"class="errorstyle"></div> </div>css:
复制代码代码如下:.errorstyle { height:20px; width:225px; background-color:#FFCCCC; color:#F00; font-size:12px; border:#FF0000 solid 1px; margin-top:10px; }结果发现IE6.IE7正常 ie8,FF显示错误。
症结：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。
解决方案：
1、使用浮动来解决 即将子层代码改为：
复制代码代码如下:.errorstyle { height:20px; width:225px; background-color:#FFCCCC; color:#F00; font-size:12px; border:#FF0000 solid 1px; margin-left:90px; display:inline; margin-top:10px; float:left; }2、使用padding-top来解决(因为FF盒模型问题 不推荐使用)
OK,一切都好了～
++++++++++++++++++++++++++++++++++++++++++++++++++
PS:
其实这个是一个外边距叠加的问题 恰恰firefox跟ie8中是正确的 而ie6、7之中是错误的 内部容器的margin与外部叠加 叠加的margin处于容器外部。浮动元素不会产生外边距的叠加 所以间接解决了你遇到的问题。
来源：爱蒂网
