只改動CSS讓IE6支援透明PNG

作為瀏覽器市場的老大，IE6的罪惡罄竹難書，不支援透明PNG這一“特性”讓IE6成為常用瀏覽器中唯一的異類。IE特有的CSS濾鏡雖然可以做到這一點，但是代碼比較複雜，而且使用了該濾鏡所屬標籤下的連結失效。在這裡和大家分享一個能讓IE6不完美
支援透明PNG圖片的“傻瓜式”指令碼，至於為什麼是不完美，我們稍後分析

來源：
http://www.twinhelix.com/css/iepngfix/

預覽：
http://www.twinhelix.com/css/iepngfix/demo/

下載：
http://www.twinhelix.com/css/iepngfix/iepngfix.zip

效果：
允許IE6正常顯示使用<img>標籤插入或以CSS background-image方式寫入的透明PNG圖象。

使用方法：
 

1、下載指令碼指令碼，將其中的iepngfix.htc
和blank.gif解壓縮到合適的目錄內，.htc即Html Components
，該檔案需要在CSS中被調用；blank.gif是一個1×1像素的透明GIF圖片，缺少該檔案會使<img>標籤插入的PNG圖象顯示為紅色的叉燒包。

2、在iepngfix.htc
中修改blank.gif
的路徑，var blankImg =‘blank.gif的正確路徑’，這是惟一一個需要修改的配置。

if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif’;

3、在css中將需要使用透明PNG的元素與.htc檔案關聯。

例如：*{behavior: url(iepngfix.htc) }

輕鬆三步，IE6就能支援透明PNG圖片了。

進階使用：

1、在css中使用萬用字元“*”調用.htc指令碼會對body內所有標籤進行處理，加大用戶端的資源消耗，延緩頁面載入時間。我們可以細化CSS選取器針對某一個標籤甚至是某個ID的元素來套用指令碼以獲得更好的使用者體驗。

例如：img,div{behavior: url(iepngfix.htc) }
div#header{behavior: url(iepngfix.htc)}

如果無法預見頁面中哪些地方需要這個濾鏡，還可以將behavior寫入成class以便調用。

.pngsupport{behavior: url(iepngfix.htc)}

2、利用IE的條件注釋使指令碼只應用於IE6及以下版本，減少對IE7使用者的影響。

<!–[if lte IE 6]>
*{behavior: url(iepngfix.htc)}
<![endif]–>

3、behavior是IE特有的屬性，直接寫入樣式表將導致頁面無法通過W3C的css驗證。使用以下指令碼寫入behavior就可以解決這個問題，前提是頁面必須有一個外部樣式表
，並且位於這個指令碼的上面
。這種方法的不便之處每次只能添加一個選擇符。

<script type=”text/javascript”>
if (document.all && /MSIE (5/.5|6)/.test(navigator.userAgent) &&
  document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule)
 {
 document.styleSheets[0].addRule(’*', ‘behavior: url(iepngfix.htc)’);
 document.styleSheets[0].addRule(’img’, ‘behavior: url(iepngfix.htc)’);
 document.styleSheets[0].addRule(’div’, ‘behavior: url(iepngfix.htc)’);
 }
 </script>.

缺陷：

在文章開頭我就說過這個指令碼不是完美的，一起來看看iepngfix.htc都有哪些短版吧。

1、使用PNG透明背景可能導致該元素內部連結無法點擊，尤其在連結具有float屬性
的時候，如：存在於一個浮動列表中的連結。推薦解決方案：使用display:inline代替float來實現區塊層級元素的的橫向排列。

2、img標籤的插入的透明PNG圖象無法使用右鍵儲存，“另存新檔”只能取到覆蓋在上面的blank.gif。什嗎？不要blank.gif？等著吃叉燒包吧。

3、作為背景的PNG圖象無法被平鋪，無法被定位
，即background-repeat預設為no-repeat，而background-position徹底失效。

4、在頁面剛載入的時候我們依舊能看到PNG圖象因為IE6不支援而短暫出現的灰邊，時間取決分頁檔的大小和網路速度。

5、作者建議為使用PNG背景的元素設定一個固定寬度，但在我的使用中尚未發現width:auto會帶來什麼問題。

6、不支援低於5.5版本的瀏覽器，不過這個問題已經算不上問題。