关于IE6下PNG24的几个解决办法

作为前端人士，设计给的效果越来越炫，透明和半透明用到地方也越来越多，如果不考虑浏览器的兼容性的问题的话，我们用CSS代码的opacity就可以解决了，但是万恶的IE6是不支持这个属性的，那么我们就会想用PNG透明图片来解决这个问题，但是IE6还是不支持png24图片的，PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但IE6以下(IE7以上已经支持)没有把他的Alpha 通道打开，造成透明PNG图片的效果出不来。如果你用了之后就会发现IE6用灰色背景色来填充他的透明度。通过网上查找资料，一般来说有几种方法来解决这个问题。

1，利用.htc文件 从其资料上我们了解到，从5.5版本开始，Internet Explorer（IE）开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Web 行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML 行为库栏目里提供了几个定制的Web行为。这个方法有个缺点就是太麻烦，对，就是麻烦，首先我们每次做项目都要上传这么一个文件，不是很方便，而且这种方法我还真没实验过，O(∩_∩)O哈哈~

2，利用IE的滤镜功能 这是我比较常用的方法，在CSS里面设置完成透明的PNG24图片的背景后，例如

1 div.png24bg { position:relative; width:379px; height:466px; overflow:hidden; background:url(demopng24.png) no-repeat left top; }

然后再加上

1 _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="demopng24.png" ,sizingMethod="noscale");

其实这句就是IE6的HACK写法加上IE独有的滤镜功能，我们都知道在标签前加上“_”只有IE6能识别，然后用滤镜属性来添加图片地址。这个方法好是好，但是有2个常见的问题，也是我在具体应用中遇到的2个问题
　　(1)就是地址的问题 src 这个路径是指加载滤镜的页面相对于图片的路径，而不是css文件相对于图片的路径。这跟一般的图片加载是有区别的。比如说你的页面index.html，要引用的图片demopng24.png放在images文件夹里，CSS放在styles文件夹里，CSS里面引用背景图的路径应该为../images/demopng24.png，但是filter里的路径是 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="demopng24.png" ,sizingMethod="noscale"); 它是index.html相对于图片的路径。所以当做项目的时候要是图片不显示的话，一般你可以先看看你的路径是否正确。
　　(2)关于图片或者图片上的块的事件问题 当这个图片过着有着这个图片背景的块用点击事件的时候，是毫无反应的，也就是说IE6会因为你用这种方法而屏蔽掉点击事件。所以我们可以考虑用第三种方法。利用JS。
但是一般来说，如果对图片没有什么点击操作的这种方法就可以解决IE6下PNG24透明度的问题，而且代码量小，操作起来简单。

3，调用JS 这是网上也比较流行的一种方法，可以加载一个外部JS，或者直接在页面里用JS语句，注意要记的用IE6的注释，给个例子

1 <!--[if lte IE 6]>
2 　　<script type="text/javascript" src="png24.js"></script>
3 <![endif]-->

这个JS文件会自动处理页面里面的PNG图片，具体代码如下：

 1 function fixpng24() {
 2            var arVersion = navigator.appVersion.split("MSIE");
 3            var version = parseFloat(arVersion[1]);
 4            if ((version >= 5.5) && (document.body.filters)) {
 5                for (var i = 0; i < document.images.length; i++) {
 6                    var img = document.images[i];
 7                    var imgName = img.src.toUpperCase();
 8                    if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
 9                        var imgID = (img.id) ? "id='" + img.id + "' " : "";
10                        var imgClass = (img.className) ? "class='" + img.className + "' " : "";
11                        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
12                        var imgStyle = "display:inline-block;" + img.style.cssText;
13                        if (img.align == "left") imgStyle = "float:left;" + imgStyle;
14                        if (img.align == "right") imgStyle = "float:right;" + imgStyle;
15                        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
16                        var strNewHTML = "<span " + imgID + imgClass + imgTitle
17                                + " style=\"" + "" + img.width + "px; height:" + img.height + "px;" + imgStyle
18                                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
19                                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
20                        img.outerHTML = strNewHTML;
21                        i = i - 1;
22                    }
23                }
24            }
25        }
26        window.onload=function(){
27            fixpng24();
28            }

其实为了解决CSS不能点击的问题的话，我们也可以用点“巧活”，因为IE可以支持GIF图片的透明，那么我们可以在要点击的块上面盖一个透明的GIF图片来当这个块的伪层，然后在这个伪层上面写入链接锚点。

上传一个图片例子代码和效果：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>png24半透明问题</title>
 6 <!--[if lte IE 6]>
 7 <script type="text/javascript" src="png24.js"></script>
 8 <![endif]--> 
 9 <style>
10     body { background:blue;}
11     div.nodeal {position:relative; width:379px; height:466px; overflow:hidden; background:url(demopng24.png) no-repeat left top; }
12     div.png24bg { position:relative; width:379px; height:466px; overflow:hidden; background:url(demopng24.png) no-repeat left top; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="demopng24.png" ,sizingMethod="noscale");}
13     div.png24bg p { position:absolute; left:0px; top:0px; cursor:pointer;}
14     div.png24img { position:relative; width:379px; height:466px; overflow:hidden; }
15     div.png24img p { position:absolute; left:0px; top:0px; width:100%; cursor:pointer;}
16 </style>
17 </head>
18 <body>
19 <div class="nodeal"></div>
20 <div class="png24bg">
21     <p onclick="alert('1')">咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦咿呀咿呀呦
22     </p>
23 </div>
24 <div class="png24img">
25     <img src="demopng24.png" alt="" title=""/>
26     <p onclick="alert('2')">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
27 </div>
28 </body>
29 </html>