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>

         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.

         {

             var arVersion = navigator.appVersion.split("MSIE")

             var version = parseFloat(arVersion[1])

             if ((version >= 5.5) && (document.body.filters))

             {

                 for(var j=0; j<document.images.length; j++)

                 {

                     var img = document.images[j]

                     var imgName = img.src.toUpperCase()

                     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

                     {

                         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

                         if (img.align == "left") imgStyle = "float:left;" + imgStyle

                         if (img.align == "right") imgStyle = "float:right;" + imgStyle

                         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

                         var strNewHTML = "<span " + imgID + imgClass + imgTitle

                                 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

                                 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

                                 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

                         img.outerHTML = strNewHTML

                         j = j-1

                     }

                 }

             }

         }

         window.attachEvent("onload", correctPNG);

     </script>

 <style>

         body{background: lightblue;}

         div img{bottom: 3px solid yellow;}

     </style>

     <div class="imgpng">

         <img src="pic.png"/>

     </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

 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>

秒客网

PNG兼容IE6解决方法

相关文章