IE6 雙倍水平外邊距BUG以解決方案

出現條件：

1、沒有設定display:inline的塊元素

2、浮動元素

3、設定了水平外邊距（浮動的方向和水平外邊距設定的方向一致）

4、元素與父容器之間

備註：因為浮動都有其相對應的物件，只有相對於其父容器的浮動才會出現這樣的問題。第乙個元素是相對父容器的，而第二個是相對第乙個兄弟元素的，所以第二個浮動元素不會出現雙倍水平外邊距問題。而且只有設定水平外邊距的值才會出現雙倍外邊距，垂直外邊距沒有關係。

解決辦法：給浮動塊框設定display:inline解決問題

下面是測試**：

ie6浮動雙倍外邊距 ie6浮動雙倍外邊距

原因分析：這個現象僅當塊框設定了浮動才會出現，行內框浮動不會出現此問題。因為行內框預設display:inline，給其float後自動就具有塊框特性，所以如果是span之類的行內框，浮動後是不需要再單獨設定display:inline就可以自動消除雙倍水平外邊距。

下面是測試**：

ie6浮動雙倍外邊距 ie6浮動雙倍外邊距

總結一下：

如果預設的是塊元素例如div之類的，在設定 float 後同時要置display:inline來解決ie6的雙倍水平外邊距；

如果預設是內聯元素例如span之類的，那麼浮動後是沒有關係的，因其自身居右display:inline，所以不需要再重複新增該屬性。