之前一段時間系統(tǒng)的學習了div+css之后，給公司的網(wǎng)站進行了div化，沾沾自喜之余感嘆著自己的進步。但第二天老板跑過來問我，網(wǎng)站是不是還沒更新好啊，怎么有那么多空白啊！我打開看，沒有啊，無奈之下用ietest測試了一下，原來ie6下還真的有大片空白域。百思不得其解的我從html到css用之前學的知識整個分析了一遍，居然沒發(fā)現(xiàn)任何問題。
后來搜索了不少教程我才認識到了作為一個菜鳥級的前端設計都會遇到的一個問題：IE6浮動雙margin的bug，顯然這顯示了我對網(wǎng)頁知識有多么匱乏，經(jīng)過找原因找方法，終于解決了這個高手們不屑一顧的問題。
無知歸無知，有進步總是好的，這里寫一下關于IE6浮動雙margin的bug的原因及解決辦法，希望有天回頭看看的時候能狠狠地嘲笑自己一把！
IE6下有一個著名的margin雙倍bug
出現(xiàn)這個bug需要具備三個條件：
1、瀏覽器為IE6，大于IE6的ie系列版本和火狐等其他瀏覽器不會出現(xiàn)這個情況。
2、對象設置了float屬性和寬度（可選），如.ILeft { float: left; width: 150px;}
3、對象設置了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越少越好）
2011.5.30號引用博客：http://blog.csdn.net/twosecond/archive/2009/06/24/4295879.aspx
前言：IE6雙倍邊距這個問題其實早在學習CSS之初都已經(jīng)知道如何解決，但當時只知道如何解決而并不知道引起這個BUG的原因是什么，再接下來工作過程中不斷實踐也終于明白是怎么回事了。但最近開發(fā)項目逐漸轉移到以IE7為IE的基礎參考標準后，逐漸有點淡忘IE6下的一些詭異BUG的解決方案了，就是知道如何解決也忘了部分理論知識了。
1、問題：在IE6下如果某個標簽使用了float屬性，同時設置了其外補丁“margin:10px 0 010px”可以看出，上邊距和左邊距同樣為10px，但第一個對象距左邊有20px。
2、解決辦法：當將其display屬性設置為inline時問題就都解決了。
3、說明：這是因為塊級對象默認的display屬性值是block，當設置了浮動的同時，還設置了它的外邊距就會出現(xiàn)這種情況。也許你會問：“為什么第二個對象和第一個對象之間就不存在雙倍邊距的BUG”？因為浮動都有其相對應的對象，只有相對于其父對象的浮動對象才會出現(xiàn)這樣的問題。第一個對象是相對父對象的，而第二個對象是相對第一個對象的，所以第二個對象在設置后不會出現(xiàn)問題。另外在一些特殊布局中，可能需要組合使用display:block;和display:inline;才能達到預期效果。
當然最壞的情況下，我們就可以使用"margin:10px 0 0 10px;*margin:10px 0 010px;_margin:10px 0 05px"，這種“標準屬性;*IE7識別屬性;_IE6識別屬性”HACK方式解決。
4、總結：這個現(xiàn)象僅當塊級對象設置了浮動屬性后才會出現(xiàn)，內(nèi)聯(lián)對象（行級對象）不會出現(xiàn)此問題。并且只有設置左邊距和右邊距的值才會出問題，上下邊距不會出現(xiàn)問題。
