IE6的PNG透明解决方案

现在切出来的很多设计图都是PNG的，而PNG透明的图在IE6下会出现灰底的现象，这会让人很头疼，看了W3cfuns提出的8中解决方案（链接），挺好的，但是稍微分析了下，比较完美的是下面的2种方法。

解决IE6png的方法主要有滤镜、纯CSS、原生js、jQuery或者引入插件等方法。但是以上方法的缺点很明显，要么是不支持IMG标签的，或不支持background，不支持CSS Sprite，不支持hover的种种问题。而且有的写法也很麻烦，导致代码很复杂，然后我觉得以下两种方法是不错的。

一、引入DD_belatedPNG.js文件

使用方法：下载该文件（下面给出代码，DD_belatedPNG）

然后引入并运行，代码是

1 2 3 4 5 6 7 8

<!--[if IE 6]>     <script type="text/javascript" src="js/DD_belatedPNG.js"></script>     <script language="javascript" type="text/javascript">     window.onload = function(){         DD_belatedPNG.fix("*");     }     </script> <![endif]-->

w3cfuns的解决方法是，在每个用到png的标签都加上id或class，然后写成

1 2 3 4

window.onload = function() {      DD_belatedPNG.fix(".pngFix,.pngFix:hover"); }

这样子的写法的话，你在写html的时候就得增加很多代码，而我们也知道css中的*代表全部，所以把fix里面改成*，一切问题都很好解决。

优点：

1. CSS代码无需任何修改，按照平时的思路来写即可；
2. 无需配置；
3. 没有多余的gif图片；
4. 支持img；
5. 支持平铺；
6. 支持CSS Sprite；
7. 支持Hover等伪类；

缺点：

1. 额外加入了js文件（6.39k）和http请求，可以忽略不计；
2. 当文件载入之前，会先暂时呈现灰底；
3. js文件过多的时候，可能会报错，导致js无法正常运行（这种情况极少出现，可以忽略不计）；

二、引入EvPNG.js文件

步骤跟上一种方法是完全一样的，只是引入的JS文件不一样罢了，点击下载EvPng，引入并运行

1 2 3 4 5 6 7 8

<!--[if IE 6]>     <script type="text/javascript" src="js/EvPng.js"></script>     <script language="javascript" type="text/javascript">     window.onload = function(){         EvPNG.fix("*");     }     </script> <![endif]-->

优点和第一种方法一样

缺点：

1. 额外加入了js文件（文件4.93k，比DD_belatedPNG的6.39k还小）和http请求，可以忽略不计；
2. 当文件载入之前，会先暂时呈现灰底；
3. js文件过多的时候，可能会报错，导致js无法正常运行（这种情况极少出现，可以忽略不计）；
4. 使用CSS Sprite技术的hover效果在部分情况下top可能会有1像素的偏差。

所以呢，建议使用第一种方法，全能了