現在切出來的很多設計圖都是PNG的，而PNG透明的圖在IE6下會出現灰底的現象，這會讓人很頭疼，看了W3cfuns提出的8中解決方案（鏈接），挺好的，但是稍微分析了下，比較完美的是下面的2種方法。

解決IE6png的方法主要有濾鏡、純CSS、原生js、jQuery或者引入插件等方 法。但是以上方法的缺點很明顯，要么是不支持IMG標簽的，或不支持background，不支持CSS Sprite，不支持hover的種種問題。而且有的寫法也很麻煩，導致代碼很復雜，然后我覺得以下兩種方法是不錯的。

成都創新互聯公司專注于企業營銷型網站、網站重做改版、鞍山網站定制設計、自適應品牌網站建設、H5建站、商城網站開發、集團公司官網建設、成都外貿網站建設公司、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為鞍山等各大城市提供網站開發制作服務。

一、引入DD_belatedPNG.js文件

使用方法：下載該文件（下面給出代碼，DD_belatedPNG）

然后引入并運行，代碼是

<!--[if IE 6]> <script type="text/javascript" src="js/EvPng.js"></script> <script language="javascript" type="text/javascript"> DD_belatedPNG.fix("*"); </script> <![endif]-->

1 2 3 4 5 6

<!--[ifIE6]>    <scripttype="text/javascript"src="js/EvPng.js"></script>    <scriptlanguage="javascript"type="text/javascript">    DD_belatedPNG.fix("*");    </script><![endif]-->

w3cfuns的解決方法是，在每個用到png的標簽都加上id或class，然后寫成

window.onload = function() { DD_belatedPNG.fix(".pngFix,.pngFix:hover"); }

1 2 3 4

window.onload=function(){    DD_belatedPNG.fix(".pngFix,.pngFix:hover");}

這樣子的寫法的話，你在寫html的時候就得增加很多代碼，而我們也知道css中的*代表全部，所以把fix里面改成*，一切問題都很好解決。

優點：
1、CSS代碼無需任何修改，按照平時的思路來寫即可；
2、無需配置；
3、沒有多余的gif圖片；
4、支持img；
5、支持平鋪；
6、支持CSS Sprite；
8、支持Hover等偽類；

缺點：
1、額外加入了js文件（6.39k）和http請求，可以忽略不計；
2、當文件載入之前，會先暫時呈現灰底；
3、js文件過多的時候，可能會報錯，導致js無法正常運行（這種情況極少出現，可以忽略不計）；

二、引入EvPNG.js文件

步驟跟上一種方法是完全一樣的，只是引入的JS文件不一樣罷了，點擊下載EvPng，引入并運行

<!--[if IE 6]> <script type="text/javascript" src="js/EvPng.js"></script> <script language="javascript" type="text/javascript"> EvPNG.fix("*"); </script> <![endif]-->

1 2 3 4 5 6

<!--[ifIE6]>    <scripttype="text/javascript"src="js/EvPng.js"></script>    <scriptlanguage="javascript"type="text/javascript">    EvPNG.fix("*");    </script><![endif]-->

優點和第一種方法一樣

缺點：
1、額外加入了js文件（文件4.93k，比DD_belatedPNG的6.39k還小）和http請求，可以忽略不計；
2、當文件載入之前，會先暫時呈現灰底；
3、js文件過多的時候，可能會報錯，導致js無法正常運行（這種情況極少出現，可以忽略不計）；
4、使用CSS Sprite技術的hover效果在部分情況下top可能會有1像素的偏差。

所以呢，建議使用第一種方法，全能了

網站名稱：IE6的PNG透明解決方案-創新互聯
文章源于：http://vcdvsql.cn/article28/ccedcp.html

成都網站建設公司_創新互聯，為您提供云服務器、虛擬主機、品牌網站設計、企業建站、網站維護、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯