margin-top的bug

今天在做登录页面的时候发现个margin-top的bug ;

初始代码如下：

html:

1 <div class="logo"></div>
2 <div class="login_text">
3 <div id="error" class="errorstyle"></div>
4 </div>

css:

1 .errorstyle {
2 height:20px;
3 width:225px;
4 background-color:#FFCCCC;
5 color:#F00;
6 font-size:12px;
7 border:#FF0000 solid 1px;
8 margin-top:10px; /* 注意这里 */
9 }

结果发现IE6.IE7正常，ie8,FF显示错误

马上去以margin-top的bug 为关键字百度，结果发现这个BUG是存在的，见margin-top的bug

症结：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。

解决方案：

1、使用浮动来解决，即将子层代码改为：

1 .errorstyle {
2 height:20px;
3 width:225px;
4 background-color:#FFCCCC;
5 color:#F00;
6 font-size:12px;
7 border:#FF0000 solid 1px;
8 margin-left:90px;
9 display:inline;
10 /* 以下代码修正FF和ie8的margin-top bug */
11 margin-top:10px;
12 float:left;
13
14 }
2、使用padding-top来解决(因为FF盒模型问题，不推荐使用)

OK,一切都好了～