ie6常見css bug

標籤：blog   http   io   ar   color   os   使用   sp   strong   

相信每個前端人都會有同感——ie6這東西真是萬惡啊！就連ms也大力鼓勵消費者淘汰ie6，不過很不幸，大概是因為xp綁定了ie6，因此在國內ie6的市場佔有率仍高達42.43%，這是今年2月份的資料。也正因ie6的高佔有率，因此在網站開發時也不得不考慮相容ie6，就算不做到完美相容，來個基本相容也是必須的，起碼不要讓你的網站在ie6中亂套了。今天就跟大家分享一些平時積累的ie6 bug解決方案。

 

IE6雙倍邊距bug

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

 

3像素問題及解決辦法

當使用float浮動容器後，在IE6下會產生3px的空隙，有意思的是右側容器沒設定高度時3px在右側容器內部，當設定高度後又跑到容器的左側了。解決方案有幾種，對於網上非常流行的給右側div增加margin-right: -3px我不是很贊同，大大增加了布局的複雜度並且如果父div有設定浮動的話就會失效，簡單高效的解決辦法是在父div裡設定overflow:hidden。

 

當子項目浮動且未知高度時，怎麼使父容器適應子項目的高度？

這種情況可在父視窗加上 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{height:0px;/*給定任何小於20px的高度 */}
<div></div>

如果不讓它預設為19PX。而是0PX的話
解決方案有3種：
1.css裡面加上overflow:hidden;
2.div裡面加上注釋,
<div><!– –></div>
3.css裡面加上line-height:0;然後div裡面加上#nbsp;,
<div>&nbsp;</div>(#換成&)

 

修正重複文字bug

複雜的布局可以觸發在浮動元素的最後一些字元可能出現在出現在清除元素下面的bug。這裡有幾個解決方案，有些是完美的，但是做一些反覆實驗也是必須的：

• 確保所有的元素使用”display:inline;”
• 在最後一個元素上使用一個”margin-right:-3px;”
• # 為浮動元素的最後一個條目使用一個條件注釋，比如：
  <!–[if !IE]>Put your commentary in here…<![endif]–>
• 在容器的最後元素使用一個空的div(它也有必要設定寬度為90%或類似寬度。)

 

不過我認為，每個網站都有自己所面向的使用者群，如果盲目相容各種瀏覽器就意味著要捨棄一些出色的網站效果，這使到很多使用者不能獲得更好的網站體驗，因此應該根據自己的使用者群對網站進行設計，比如說現在做的是一個前端技巧分享網站，所面向的大多是前端工程師或達人，這類使用者群一般都會使用firefox等標準瀏覽器，因此大可捨棄對ie6、7等低級瀏覽器的相容，以求做出更好的效果，這樣網站上的大多使用者都將會獲得更出色的體驗。

本文由 Kayo Lee 發表，本文連結：http://kayosite.com/ie6-common-css-bug.html

ie6常見css bug