之前一段時間系統(tǒng)的學(xué)習(xí)了div+css之后，給公司的網(wǎng)站進(jìn)行了div化，沾沾自喜之余感嘆著自己的進(jìn)步。但第二天老板跑過來問我，網(wǎng)站是不是還沒更新好啊，怎么有那么多空白?。∥掖蜷_看，沒有啊，無奈之下用ietest測試了一下，原來ie6下還真的有大片空白域。百思不得其解的我從html到css用之前學(xué)的知識整個分析了一遍，居然沒發(fā)現(xiàn)任何問題。

　　后來搜索了不少教程我才認(rèn)識到了作為一個菜鳥級的前端設(shè)計(jì)都會遇到的一個問題：IE6浮動雙margin的bug，顯然這顯示了我對網(wǎng)頁知識有多么匱乏，經(jīng)過找原因找方法，終于解決了這個高手們不屑一顧的問題。

　　無知?dú)w無知，有進(jìn)步總是好的，這里寫一下關(guān)于IE6浮動雙margin的bug的原因及解決辦法，希望有天回頭看看的時候能狠狠地嘲笑自己一把！

IE6下有一個著名的margin雙倍bug

出現(xiàn)這個bug需要具備三個條件：

1、瀏覽器為IE6，大于IE6的ie系列版本和火狐等其他瀏覽器不會出現(xiàn)這個情況。

2、對象設(shè)置了float屬性和寬度（可選），如.ILeft { float: left; width: 150px;}

3、對象設(shè)置了margin屬性，如.ILeft { float: left; width: 150px; margin-left: 15px}

以上的class為ILeft的層在IE6下瀏覽就會出現(xiàn)左邊距為30px的情況，而不是正常想象中的15px。

解決辦法是
給對象的css屬性加上 display:inline 即可解決該bug

代碼：.ILeft { float: left; width: 150px; margin-left: 15px; display:inline}。

再次刷新網(wǎng)頁，在IE6下的margin雙倍的bug就消失了

注意，：該bug只針對IE6有效（但愿此類bug越少越好）

IE6雙倍邊距bug解決方法

2011.5.30號引用博客：http://blog.csdn.net/twosecond/archive/2009/06/24/4295879.aspx

前言：IE6雙倍邊距這個問題其實(shí)早在學(xué)習(xí)CSS之初都已經(jīng)知道如何解決，但當(dāng)時只知道如何解決而并不知道引起這個BUG的原因是什么，再接下來工作過程中不斷實(shí)踐也終于明白是怎么回事了。但最近開發(fā)項(xiàng)目逐漸轉(zhuǎn)移到以IE7為IE的基礎(chǔ)參考標(biāo)準(zhǔn)后，逐漸有點(diǎn)淡忘IE6下的一些詭異BUG的解決方案了，就是知道如何解決也忘了部分理論知識了。

1、問題：在IE6下如果某個標(biāo)簽使用了float屬性，同時設(shè)置了其外補(bǔ)丁“margin:10px 0 0 10px”可以看出，上邊距和左邊距同樣為10px，但第一個對象距左邊有20px。

2、解決辦法：當(dāng)將其display屬性設(shè)置為inline時問題就都解決了。

3、說明：這是因?yàn)閴K級對象默認(rèn)的display屬性值是block，當(dāng)設(shè)置了浮動的同時，還設(shè)置了它的外邊距就會出現(xiàn)這種情況。也許你會問：“為什么第二個對象和第一個對象之間就不存在雙倍邊距的BUG”？因?yàn)楦佣加衅湎鄬?yīng)的對象，只有相對于其父對象的浮動對象才會出現(xiàn)這樣的問題。第一個對象是相對父對象的，而第二個對象是相對第一個對象的，所以第二個對象在設(shè)置后不會出現(xiàn)問題。另外在一些特殊布局中，可能需要組合使用display:block;和display:inline;才能達(dá)到預(yù)期效果。
當(dāng)然最壞的情況下，我們就可以使用"margin:10px 0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px"，這種“標(biāo)準(zhǔn)屬性;*IE7識別屬性;_IE6識別屬性”HACK方式解決。

4、總結(jié)：這個現(xiàn)象僅當(dāng)塊級對象設(shè)置了浮動屬性后才會出現(xiàn)，內(nèi)聯(lián)對象（行級對象）不會出現(xiàn)此問題。并且只有設(shè)置左邊距和右邊距的值才會出問題，上下邊距不會出現(xiàn)問題。