PNG兼容IE6解決方法

雖然說現在早就不用ie6瀏覽器了，可以還是有一小部分還在使用 ，剛好公司也有要求~~~

<p>     E6不兼容png圖片，確實讓網頁的圖片質量大大下降，為了兼容萬惡的IE6，總結了下面幾種方法：
        1,通過CSS濾鏡使背景圖的PNG對IE6進行兼容。
        2,給img定義樣式，頁面上所有透明png即自動透明了。
        3,通過JS，插入一段代碼，實現img標簽png兼容IE6的問題。
        4,可以把png圖片，轉換為gif圖片。（最簡單常用的方法）

</p>

第一種方法：

    1、通過CSS濾鏡使背景圖的PNG對IE6進行兼容
    定義一個樣式,給某個div應用這個樣式后，div的透明png背景圖片自動透明了。

<style>  2  body{background: lightblue;}
 .png{
 width: 550px;
 height: 500px;
 background-image: url(pic.png)!important;/* FF IE7 */
 background-repeat: no-repeat;
 _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png');  /*IE6*/
 _ background-image: none; /* IE6 */
 overflow: hidden;
        }
 </style>

<div class="png">
        <div>通過CSS濾鏡使背景圖的PNG對IE6進行兼容</div>
    </div>

第二種方法

    給img定義樣式，頁面上所有透明png即自動透明了。注意：這方法只對直接插入的圖片有效，對背景圖無效。
    要准備一個透明的小圖片transparent.gif,大小不限，並將gif的圖片放在跟png圖片一個文件夾里。請勿大量
    使用，否則會導致頁面打開很慢!!!不過這種方法設置圖片的不能控制其大小。

 <style> body{background: lightblue;} .imgpng img { azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true); } </style>

<div class="imgpng">
        <img src="pic.png" />
</div>

第三種方法：

通過JS，插入一段代碼，實現img標簽png兼容IE6的問題

<script language="JavaScript">
        function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
 {  4             var arVersion = navigator.appVersion.split("MSIE")  5             var version = parseFloat(arVersion[1])  6             if ((version >= 5.5) && (document.body.filters))  7  {  8                 for(var j=0; j<document.images.length; j++)  9  { 10                     var img = document.images[j] 11                     var imgName = img.src.toUpperCase() 12                     if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 13  { 14                         var imgID = (img.id) ? "id='" + img.id + "' " : ""
                        var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                        var imgStyle = "display:inline-block;" + img.style.cssText 18                         if (img.align == "left") imgStyle = "float:left;" + imgStyle 19                         if (img.align == "right") imgStyle = "float:right;" + imgStyle 20                         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 21                         var strNewHTML = "<span " + imgID + imgClass + imgTitle 22                                 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                        img.outerHTML = strNewHTML 26                         j = j-1
 } 28  } 29  } 30  } 31         window.attachEvent("onload", correctPNG); 32     </script>

<style> 2  body{background: lightblue;}
 div img{bottom: 3px solid yellow;}
 </style> 5 
 <div class="imgpng"> 7  <img src="pic.png"/> 8  </div>

番外：

使用IE6的hack來書寫只有IE6能識別的css樣式。

.bb{
height:32px;
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
於是大家還可以這樣來區分firefox，IE7，IE6 9 background:green!important; *background:orange; _background:blue;

 

關於兼容ie6的一些方法：
背景png圖片，括號里的是樣式選擇器，中間用逗號隔開

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript"> DD_belatedPNG.fix('.tel,.head_content'); </script>