IE6中CSS常見BUG全集及解決方案

IE6雙倍邊距bug

當頁面內有多個連續浮動時，如本頁的表徵圖列表是採用左浮動，此時設定li的左側margin值時，在最左側呈現雙倍情況。如外邊距設定為10px， 而左側則呈現出20px，解決它的方法是在浮動元素上加上display:inline;的樣式，這樣就可避免雙倍邊距bug。

 

3像素問題及解決辦法

當使用float浮動容器後，在IE6下會產生3px的空隙，有意思的是右側容器沒設定高度時3px在右側容器內部，當設定高度後又跑到容器的左側了，所以對布局精度要求高的話，請參考例29、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-A
a: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中奇數寬高的BUG
IE6還有奇數寬高的bug，解決方案就是將外部相對定位的div寬度改成偶數。

IE6下為什麼圖片下方有空隙產生
解決這個BUG的方法也有很多，可以是改變html的排版，或者定義img 為display:block
或者定義vertical-align屬性值為vertical-align:top | bottom |middle |text-bottom
還可以設定父容器的字型大小為零，font-size:0

 

ie6下空標籤高度問題
一個空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%或類似寬度。)