IE6透明PNG解决方案

IE6不支持PNG-24图片一直困扰很多人，但是可以通过IE的独有的滤镜来解决，解决的方案很多，比如：将滤镜写在CSS里，还可以写成单独的 Javascript文件，本来认为推荐两种做法：第一种，将所有PNG图片添加滤镜（此方法有副作用）；第二种：有选择性的添加滤镜（推荐）；两者都可以将代码放在单独的JS文件里，然后引用。

第一种：

直接添加如下代码：

JSCode

 1 function correctPNG() {
 2     for (var i = 0; i < document.images.length; i++) {
 3         var img = document.images[i];
 4         var imgName = img.src.toUpperCase();
 5         if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
 6             var imgID = (img.id) ? "id='" + img.id + "' " : "";
 7             var imgClass = (img.className) ? "class='" + img.className + "' " : "";
 8             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
 9             var imgStyle = "display:inline-block;" + img.style.cssText;
10             if (img.align == "left") {
11                 imgStyle = "float:left;" + imgStyle;
12             }
13             if (img.align == "right") {
14                 imgStyle = "float:right;" + imgStyle;
15             }
16             if (img.parentElement.href) {
17                 imgStyle = "cursor:hand;" + imgStyle;
18             }
19             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>";
20             img.outerHTML = strNewHTML;
21             i = i - 1;
22         }
23     }
24 }
25 function alphaBackgrounds() {
26     var rslt = navigator.appVersion.match(/MSIE(d+.d+)/, '');
27     var itsAllGood = (rslt !== null && Number(rslt[1]) >= 5.5);
28     for (i = 0; i < document.all.length; i++) {
29         var bg = document.all[i].currentStyle.backgroundImage;
30         if (bg) {
31             if (bg.match(/.png/i) !== null) {
32                 var mypng = bg.substring(5, bg.length - 2);
33                 document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src ='" +
34                     mypng + "',sizingMethod='crop')";
35                 document.all[i].style.backgroundImage = "url('')";
36             }
37         }
38     }
39 }
40 if (navigator.userAgent.indexOf("MSIE 6.0") > -1) {
41     window.attachEvent("onload", correctPNG);
42     window.attachEvent("onload", alphaBackgrounds);
43 }

View Code