今天在做登錄頁面的時候發(fā)現(xiàn)個margin-top的bug ;

初始代碼如下：

html:

復(fù)制代碼代碼如下:
<div class=”logo”></div>
<div class=”login_text”>
<div id=”error” class=”errorstyle”></div>
</div>

css:

復(fù)制代碼代碼如下:
.errorstyle {
height:20px;
width:225px;
background-color:#FFCCCC;
color:#F00;
font-size:12px;
border:#FF0000 solid 1px;
margin-top:10px; /* 注意這里 */
}

結(jié)果發(fā)現(xiàn)IE6.IE7正常，ie8,FF顯示錯誤。

癥結(jié)：當兩個容器嵌套時,如果外層容器和內(nèi)層容器之間沒有別的元素,firefox會把內(nèi)層元素的margin-top作用于父元素。

解決方案：

1、使用浮動來解決，即將子層代碼改為：

復(fù)制代碼代碼如下:
.errorstyle {
height:20px;
width:225px;
background-color:#FFCCCC;
color:#F00;
font-size:12px;
border:#FF0000 solid 1px;
margin-left:90px;
display:inline;
/* 以下代碼修正FF和ie8的margin-top bug */
margin-top:10px;
float:left;
}

2、使用padding-top來解決(因為FF盒模型問題，不推薦使用)

OK,一切都好了～

++++++++++++++++++++++++++++++++++++++++++++++++++

PS:

其實這個是一個外邊距疊加的問題，恰恰firefox跟ie8中是正確的，而ie6、7之中是錯誤的，內(nèi)部容器的margin與外部疊加，疊加的margin處于容器外部。浮動元素不會產(chǎn)生外邊距的疊加，所以間接解決了你遇到的問題。