熟悉CSS盒模型朋友相信對(duì)于IE雙倍浮動(dòng)邊界BUG不會(huì)陌生（如果你并不是很清楚可以點(diǎn)擊），這個(gè)BUG只會(huì)產(chǎn)生在浮動(dòng)行的第一個(gè)浮動(dòng)元素，所以如果第一個(gè)浮動(dòng)元素沒(méi)有使用外補(bǔ)丁margin就不會(huì)有雙倍距離。不過(guò)最近發(fā)現(xiàn)IE對(duì)于這個(gè)BUG居然有延伸的現(xiàn)象。
問(wèn)題
下例所有圖的浮動(dòng)行的第一個(gè)浮動(dòng)元素外補(bǔ)丁margin都為0
#left2的margin-left為50px顯示正常
當(dāng)#left2的margin-left為100px顯示正常
接著我們將#left2的margin-left增大到150px，開(kāi)始有點(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)問(wèn)題，它實(shí)際#left2的左邊界距離等于#left1.width+(#left2.margin-left - #left1.width)*2
解決
要解決這個(gè)BUG其實(shí)很簡(jiǎn)單，跟雙倍距離解決的方法一樣，將#left2設(shè)置{display:inline}就OK。
總結(jié)
關(guān)鍵是剛才我為什么說(shuō)它是BUG的延伸呢，因?yàn)闊o(wú)論是雙倍BUG還是這個(gè)錯(cuò)誤算法的BUG都只會(huì)出現(xiàn)一次。也許你還沒(méi)明白，那這樣說(shuō)：
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ò)；
上面都是以左邊為例，右邊情況一樣
