熟悉 CSS 盒模型朋友相信對于 IE 雙倍浮動邊界 BUG 不會陌生，這個 BUG 只會產生在浮動行的第一個浮動元素（此處說法不準確，并不是第一個浮動元素，假如浮動的元素在一行顯示不下，占用了多行，那么每一行的第一個元素都會受此 BUG 影響。千一網絡編輯注），所以如果第一個浮動元素沒有使用外補丁 margin 就不會有雙倍距離。不過最近發現 IE 對于這個 BUG 居然有延伸的現象。

問題

下例所有圖的浮動行的第一個浮動元素外補丁 margin 都為 0

#left2 的 margin-left 為 50px 顯示正常

當 #left2 的 margin-left 為 100px 顯示正常

接著我們將 #left2 的 margin-left 增大到 150px，開始有點奇怪了吧

我們把 #left1 的 width 改為 110px，而 #left2 的 margin-left 繼續保持 150px

看到上面的現象，我們發現 IE 還真有性格啊，到底這個性格男是怎么樣算的啊？其實仔細觀察不難發現，當 #left2 的 margin-left 小于等于 #left 的寬度時顯示正常，可是一旦大于后就出現問題，它實際 #left2 的左邊界距離等于 #left1.width+(#left2.margin-left - #left1.width)*2

解決

要解決這個 BUG 其實很簡單，跟雙倍距離解決的方法一樣，將 #left2 設置?{display:inline}就 OK。

總結

關鍵是剛才我為什么說它是 BUG 的延伸呢，因為無論是雙倍 BUG 還是這個錯誤算法的 BUG 都只會出現一次。也許你還沒明白，那這樣說：

1. 如果 #left1 的 margin-left 大于 0 的話，那么 #left1 左邊界就產生了雙倍距離的 BUG，而后面的 #left2 的 margin-left 即便大于 #left1 的寬度也不會出錯了；

2. 如果 left1 的 margin-left 等于 0，#left2 的 margin-left 大與 #left1 的寬度，那么 #left2 左邊界出現錯誤算法的 BUG，之后還有個 #left3，即便是 #left3 的 margin-left 大與 #left2 的寬度也不會出錯；

3. 如果 left1 和 left2 的 margin-left 都等于 0，之后還有個 #left3，而 #left3 的 margin-left 大于（#left1 和 #left2 的寬度之和），那么 #left3 左邊界就出現錯誤算法 BUG，它的實際左邊界為 (#left1.width+left2.width)+(#left3.margin-left-#left1.width-left2.width)*2，然后 #left3 后面的所有浮動元素都不會出錯；

上面都是以左邊為例，右邊情況一樣。

轉載于:https://www.cnblogs.com/qiudan/archive/2013/04/16/3024394.html

總結

以上是生活随笔為你收集整理的IE6下margin-left双倍bug问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。