熟悉CSS盒模型朋友相信對于IE雙倍浮動邊界BUG不會陌生（如果你并不是很清楚可以點擊），這個BUG只會產(chǎn)生在浮動行的第一個浮動元素，所以如果第一個浮動元素沒有使用外補丁margin就不會有雙倍距離。不過最近發(fā)現(xiàn)IE對于這個BUG居然有延伸的現(xiàn)象。

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

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

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

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

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

看到上面的現(xiàn)象，我們發(fā)現(xiàn)IE還真有性格啊，到底這個性格男是怎么樣算的??？其實仔細觀察不難發(fā)現(xiàn)，當#left2的margin-left小于等于#left的寬度時顯示正常，可是一旦大于后就出現(xiàn)問題，它實際#left2的左邊界距離等于#left1.width+(#left2.margin-left - #left1.width)*2
解決
要解決這個BUG其實很簡單，跟雙倍距離解決的方法一樣，將#left2設(shè)置{display:inline}就OK。
總結(jié)
關(guān)鍵是剛才我為什么說它是BUG的延伸呢，因為無論是雙倍BUG還是這個錯誤算法的BUG都只會出現(xiàn)一次。也許你還沒明白，那這樣說：

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

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

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

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

最新評論