今天在做登錄頁面的時候發現個margin-top的bug ;

初始代碼如下：

html:

css:

結果發現IE6.IE7正常，ie8,FF顯示錯誤。

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

解決方案：

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

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

OK,一切都好了～

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

PS:

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