[技巧] IE6中常見的CSS bug集合以及解決方案

IE6雙倍邊距bug當頁面內有多個連續浮動時，如本頁的圖標列表是採用左浮動，此時設置li的左側margin值時，在最左側呈現雙倍狀況。如外邊距設置爲10px， 而左側則呈現出20px，解決它的方法是在浮動元素上加上display:inline;的樣式，這樣就可避免雙倍邊距bug。3像素問題及解決辦法當使用float浮動容器後，在IE6下會產生3px的空隙，有意思的是右側容器沒設置高度時3px在右側容器內部，當設定高度後又跑到容器的左側了，因此對佈局精度要求高的話，請參考例2九、31的解決方法。當子元素浮動且未知高度時，怎麼使父容器適應子元素的高度？這種狀況可在父窗口加上 overflow:auto;zoom:1;這兩個樣式屬性，overflow:auto;是讓父容器來自適應內部容器的高度，zoom:1;是爲了兼容 IE6而使用的CSS HACK。zoom:1;通不過W3C的驗證，這也是遺憾的一點，幸虧IE支持<!--[if IE]>這種寫法，能夠專門針對IE來寫單獨的樣式，因此能夠把這個屬性寫在頁面內的<!--[if IE]>中，這樣應該能夠經過驗證了。超連接訪問事後hover樣式就不出現的問題被點擊訪問過的超連接樣式不在具備hover和active了,不少人應該都遇到過這個問題，解決方法是改變CSS屬性的排列順序: L-V-H-Aa:link {color: #1f3a87; text-decoration:none;}a:visited {color: #83006f;text-decoration:none;}a:hover {color: #bc2931; text-decoration:underline;}a:active {color: #bc2931;}IE6下這兩個層中間怎麼有間隙這個IE的3PX BUG也是常常出現的，解決的辦法是給.right也一樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;IE6文字溢出BUG說明：註釋形成文字溢出是IE的BUG。一個空格引起CSS失效這段代碼對<p>的首字符樣式定義在IE6上看是沒有效果的（IE7沒測試），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}後，顯示就正常了。可是一樣的代碼，在FireFox下看是正常的。按道理說，p:first- letter{font-size:300%}的寫法是沒錯的。那麼問題出在哪裏呢？答案是僞類中的連字符"-"。IE有個BUG，在處理僞類時，若是僞 類的名稱中帶有連字符"-"，僞類名稱後面就得跟一個空格，否則樣式的定義就無效。而在FF中，加不加空格均可以正常處理。IE6中奇數寬高的BUGIE6還有奇數寬高的bug，解決方案就是將外部相對定位的div寬度改爲偶數。IE6下爲何圖片下方有空隙產生解決這個BUG的方法也有不少，能夠是改變html的排版，或者定義img 爲display:block或者定義vertical-align屬性值爲vertical-align:top | bottom |middle |text-bottom還能夠設置父容器的字體大小爲零，font-size:0ie6下空標籤高度問題一個空div若是高度設置爲0到19px，IE6下高度默認始終19PX。例如：.c{background-color:#f00;height:0px;/*給定任何小於20px的高度 */}<div class="c"></div>若是不讓它默認爲19PX。而是0PX的話解決方法有3種：1.css裏面加上overflow:hidden;2.div裏面加上註釋, <div class="c"><!– –></div>3.css裏面加上line-height:0;而後div裏面加上#nbsp;,<div class="c">&nbsp;</div>(#換成&)修正重複文字bug複雜的佈局能夠觸發在浮動元素的最後一些字符可能出如今出如今清除元素下面的bug。這裏有幾個解決方法，有些是完美的，可是作一些反覆試驗也是必須的：確保全部的元素使用」display:inline;」在最後一個元素上使用一個」margin-right:-3px;」# 爲浮動元素的最後一個條目使用一個條件註釋，好比：<!–[if !IE]>Put your commentary in here…<![endif]–>在容器的最後元素使用一個空的div(它也有必要設置寬度爲90%或相似寬度。)