讓ie6對png透明圖片支援起來，ie6png圖片

讓ie6對png透明圖片支援起來，ie6png圖片

一個老生常談的問題就是ie6不支援透明png圖片啊。但其實ie6隻是不支援png-24格式的透明背景圖片，但對透明背景的png-8圖片還是支援的，只是png-8圖片只有256色，放到任意瀏覽器都會呈現白色的鋸齒。

當代碼這樣時：

<style type="text/css">    .gif{        width: 400px;        height:200px;        background:#f00 url(png8.png) no-repeat;     } </style><div class="gif"></div>

 

div中的背景圖片是的透明背景png-8圖片：

瀏覽器開啟的效果如下（chrome，firefox，ie6+都是這麼個效果）：

 

 

看到這些泛白的鋸齒要哭瞎了，怎麼去除這噁心的鋸齒呢，ps儲存png-8圖片時，有多個選項，經測試通過勾選“擴散透明度仿色”時鋸齒的能達到最小，

 

如所示，鋸齒此時沒那麼噁心：

但是遠遠不夠啊，這個視覺效果還是太差了。上網查詢下，這是由於png-8白色雜邊導致的問題，可以在儲存圖片前將雜邊的顏色設定成和背景一致來解決。

在ie6下的效果如下，其他瀏覽器顯示效果也一致：

 

此時ie6下png-8透明背景圖片能正常顯示了，且不只是針對ie6，對其他瀏覽器也是用，好像很好用，但是png-8隻有256色啊，色彩不豐富，而現在廣泛使用的png-24有2^24=1678萬色，能展示很豐富的色彩，而且沒有鋸齒。所以如果原圖色彩很豐富，那麼只能轉換為png-8圖片作為降級的方法用到ie6上。還有個問題是，雜邊處理的前提是圖片覆蓋地區的背景色是單色，如果是多種顏色，那麼總會出現鋸齒了。

 

我們需要尋找更靈活的方法，ie有專用的AlphaImageLoader過濾器，可以讓ie6支援png-24的透明背景，而不是將透明色顯示為灰色,這裡要用到ie hack技巧，將background-image設定為none去掉背景圖片，在使用濾鏡載入圖片。AlphaImageLoader過濾器中的參數src指向要顯示的png-24圖片，sizingMethod有3個可選值：crop：直接放置到容器中，圖片左上方對齊容器左上方，image：讓容器的邊緣調整至包住整個圖片，scale：讓圖片調整至充滿整個容器。

      .gif{        width: 400px;        height:200px;        background: #f00 url(ie6.png) no-repeat;        *background-image:none;        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_24.png',sizingMethod=crop);      }

 

效果妥妥的：

 

不過需要注意的是瀏覽器會有提示，需要使用者點擊允許才能運行濾鏡效果，否則不僅沒有濾鏡效果，而且由於取消了背景圖片，圖片壓根就看不到（只看到紅色，字是見不到的，圖略）：

如果覺得一個個圖片添加濾鏡效果麻煩，還可以用js寫個函數一次性將頁面所有png圖片抓出來添加ie濾鏡效果。不過使用者喜歡禁掉js指令碼的話，就呵呵了。  還有一種方法是利用ie專有的css擴充--行為，引用.htc檔案來修複png透明背景問題（也有使用.htc檔案來解決圓角框的）:

div{   behavior:url(iepngfix.htc);}

 

這裡有個介紹這種技術的網站：http://www.twinhelix.com/css/iepngfix/，也可以直接下載demo檔案,詳細使用流程在demo頁面有引導：www.twinhelix.com/css/iepngfix/iepngfix.zip。未引用htc檔案，可以看到背景灰藍色：   引用htc檔案後，透明背景正常顯示了（需要點擊允許運行封鎖的內容才能正常顯示）：   讓ie6支援透明背景的png的方法就總結到這裡。既然是相容，就不可能百分百完美，具體用什麼技術去完成網頁的開發還是要思量下再做決定。雖然開發人員總是吐槽相容舊版本瀏覽器很噁心，但是舊版本瀏覽器曾經也作出過巨大貢獻。

ie6雖已是耄耋之年，但由於xp使用者還是挺多的，而且一般家庭不換電腦的話就不會去升級瀏覽器，所以ie6退出曆史舞台還需花費一些時日。在ie6剩餘不多的生命時光，我們需要做的就是修好各種bug，靜靜等待ie6掛掉。

 

補充：

評論區有人說連ie8都不去相容了，我不想多說，拿資料說話，截取自百度對瀏覽器市場份額統計。過去的3個月ie8使用者佔了21.62%，ie7使用者佔5.12%，ie6使用者佔3.85%，我想你作為開發人員，不相容ie低版本，難道是你的網站不對30%的使用者開放？不相容ie6，你的網站每100人中就有4人給差評。當然這個統計基於一般情況，如果知道訪問自己網站的特定使用者群都使用chrome或firxfox瀏覽器，那當然可以不去相容ie低版本。js架構基本拋棄低版本，這個是事實，因為js架構大部分都是外國人寫的！而外國人基本用chrome瀏覽器，這不符合國情，國內依然有很多人在用低版本的ie瀏覽器，甚至都懶得去升級。我始終覺得，不去相容多方瀏覽器的不是好開發人員，因為相容各方瀏覽器是每個開發人員的分內事，而你永遠無法要求使用者使用和你一樣的瀏覽器。

-------------------------------轉載註明出處^_^：  http://www.cnblogs.com/suspiderweb/