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

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

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

IE6下有一個(gè)著名的margin雙倍bug

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

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

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

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

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

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

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

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

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

IE6雙倍邊距bug解決方法

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

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

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

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

3、說(shuō)明：這是因?yàn)閴K級(jí)對(duì)象默認(rèn)的display屬性值是block，當(dāng)設(shè)置了浮動(dòng)的同時(shí)，還設(shè)置了它的外邊距就會(huì)出現(xiàn)這種情況。也許你會(huì)問(wèn)：“為什么第二個(gè)對(duì)象和第一個(gè)對(duì)象之間就不存在雙倍邊距的BUG”？因?yàn)楦?dòng)都有其相對(duì)應(yīng)的對(duì)象，只有相對(duì)于其父對(duì)象的浮動(dòng)對(duì)象才會(huì)出現(xiàn)這樣的問(wèn)題。第一個(gè)對(duì)象是相對(duì)父對(duì)象的，而第二個(gè)對(duì)象是相對(duì)第一個(gè)對(duì)象的，所以第二個(gè)對(duì)象在設(shè)置后不會(huì)出現(xiàn)問(wè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識(shí)別屬性;_IE6識(shí)別屬性”HACK方式解決。

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