IE浮動邊界BUG延伸探討_經驗交流

熟悉CSS盒模型朋友相信對於IE雙倍浮動邊界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後面的所有浮動元素都不會出錯；

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