说说今天在做网页时碰到的margin-top怪现象

今天在做登录页面的时候发现个margin-top的bug ,准确的说不知道是不是bug,但是有这个现象..

先看以下HTML代码:

 

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

 

 

下面是样式表

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盒模型问题，不推荐使用)

更多网页制作教程,欢迎继续关注网站制作教程网