IE和FF的邊距區別

 

上下margin疊加問題

       例如：

              #a{

                     width:100px;

                     height:100px;

                     background-color:#eeeeee;

                     border:5px solid #bbbbbbb;

                     margin:10px;

                }

       #b{

                     width:100px;

                     height:100px;

                     background-color:#bbbbbb;

                     border:5px solid #999999;

                     margin:10px;

                }

也許你會覺得，由於a對象有下邊距10px，b對象有上邊距10px，因此它們的上下距離是20px。實際上，它們的上下距離都是10px。這種原因是由CSS設計造成的。由此造成排版距離不一致，所以設計出這種空白邊疊加規則。

空白邊疊加時，以較大的margin值爲準。

對於CSS的解釋規則而言，一旦把某一個元素設定float屬性。那麼它們將不再進行空白邊疊加。例如：

#a{

                     width:100px;

                     height:100px;

                     background-color:#eeeeee;

                     border:5px solid #bbbbbbb;

                     margin:10px;

                     float:left;

                }

     #b{

                     width:100px;

                     height:100px;

                     background-color:#bbbbbb;

                     border:5px solid #999999;

                     margin:10px;

float:left;

clear：both；

}

這樣a和b的間距變成了符合盒子模型的20px間距。

 

左右margin加倍的問題

   當我們的盒對象爲浮動狀態時，在IE6之中，盒對象的左右margin會加倍。這是CSS解析問題，我們可以通過設置對象display:inline;來解決。