IE6不支持PNG24的解决办法--如何让PNG格式的透明图片在IE6下正常显示

做网站时，少不了要用PNG格式的图片，PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但是Microsoft的IE6以下(IE7已经支持)没有把PNG的Alpha 通道打开，造成透明PNG图片的效果出不来。在Firefox、Opera下显示正常的透明PNG图片，在IE下浏览时就会带有灰色背景色，so ugly。。。

不透明的就像这样：

解决方法之一是给透明PNG图片加一个滤镜：

运行代码框
<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.asp188.cn/logo.png',sizingMethod='image')></div>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

或是用CSS的方式控制，把style写在CSS文件中，就不用每贴一张图都要写这么长的代码了。

PS：因为IE5.0以下不支持AlphaImageLoader滤镜，所以IE5.0以下就不能显示透明PNG效果了，不过现在还用IE5.0以下的恐怕是没人了吧。

关于AlphaImageLoader滤镜

语法：
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
　　　　　　true : 默认值。滤镜激活。
　　　　　　false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
　　　　　　　　image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
　　　　　　　　scale : 缩放图片以适应对象的尺寸边界。　　　　　　　

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

核心代码CSS：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

已知问题：
滤镜会使图片覆盖在文本层之上，使超链接和按钮等失效。并没有设置为背景的选项。

尚不完美的解决方法：
将div、链接或按钮设置相对位置，使之浮动。

1.此法文字仍会显示为在半透明下的模糊效果。
2.div/label/gridview等长度的变化将不会引起容器长度的自动适应。

摘几段代码和方法：

把下面的代码放在head区就可以解决问题了。

pngfix.js文件的程序代码

另一个官方解决方案的核心函数

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
Copyright 2007 Ignia, LLC
Based in part on code from from http://homepage.ntlworld.com/bobosola.

Use in   with DEFER keyword wrapped in conditional comments:

<script type="text/javascript" defer="true" src="pngfix.js"></script>

*/

function fixPng() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])

  if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
    for(var i=0; i<document.images.length;></document.images.length;>       var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.indexOf(".PNG") > 0) {
        var width = img.width;
        var height = img.height;
        var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
         img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
         img.src="images/blank.gif" mce_src="images/blank.gif";
         img.width = width;
         img.height = height;
         }
       }
     }
   }

辨别浏览器功能
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下
html>body #png {background: url(images/bg.png) repeat;}
而对于IE，我们都通过滤镜的方法来定义，或许有人问，IE7不是支持PNG透明图片吗？是的，不错，IE7是支持PNG透明图片，但IE7也支持AlphaImageLoader滤镜，为了避免使用PNG图片和滤镜冲突造成的不便，我们统一在IE中使用AlphaImageLoader滤镜。我们通过只有IE才识别的通配符（*），来定义IE浏览器中的滤镜。如下：
* html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="'http://www.asp188.cn/images/bg.png");
background:none;
}

这样综合起来的决绝方法就是：
html>body #png {background: url('http://www.asp188.cn/images/bg.png) repeat;}

html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="'http://www.asp188.cn/images/bg.png");
background:none;
}

http://it.asp188.cn
http://www.asp188.cn