才子小窝

IE6真是个烂浏览器，CSS方面已经一堆bug了，连这么优秀的png图片也不兼容，无法透明，透明部分会显示成灰色，倒。
有人会选择换成gif格式，但gif格式虽然可以做到透明，但会有毛边，很不美观，不爽。
在网上找到了几个方法，觉得这个方法最简单，才子修改了一下函数，直接针对IE6有效，其它浏览器不会执行此函数。也就不需要用到IE独有的条件注释来判断了。
看原代码：

function enablePngImages() {
  var imgArr = document.getElementsByTagName("IMG");
  for(i=0; i<imgArr.length; i++){
    if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
      imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
      imgArr[i].src = "images/none.gif";
    }

    if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
      var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
      imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
      imgArr[i].style.backgroundImage = "url(images/none.gif)";
    }
  }
}

原理就是通过 javascript 和 css 滤镜来解决。images/none.gif是一张空白一个像素的图片。
调用时要采用IE独有的条件注释来判断，如下：

<!--[if lt IE 7]>
<script type='text/javascript'>
enablePngImages();
</script>
<![endif]-->

才子觉得这样调用不太方便，改了一下函数，添加了判断IE浏览器版本的代码，调用更方便。看代码：

function enablePngImages() {
  var imgArr = document.getElementsByTagName("IMG");
  var version = parseFloat(navigator.appVersion.split("MSIE")[1]);

  if (version = 6.0 && (document.body.filters)) {
    for(var i=0, j=imgArr.length; i<j; i++){
      if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
        imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
        imgArr[i].src = "images/none.gif";
      }

      if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
        var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
        imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
        imgArr[i].style.backgroundImage = "url(images/none.gif)";
      }
    }
  }
}

加了判断IE版本的代码，如果为IE6就执行。
调用如下：

window.onload = function() {
  enablePngImages();
}

为什么要用window.onload呢？这是表示加载完页面内容再执行指定的函数，保证png图片加载完成了再执行。

做了个演示页面：http://www.54caizi.org/demo/enablePngImages.html