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

問題
下例所有圖的浮動(dòng)行的第一個(gè)浮動(dòng)元素外補(bǔ)丁margin都為0

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

當(dāng)#left2的margin-left為100px顯示正常

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

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

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

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

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

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

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

HTML/CSS技術(shù)：IE浮動(dòng)邊界BUG延伸探討，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。