IE6的PNG透明解决方案

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

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

一、引入DD_belatedPNG.js文件

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

然后引入并运行，代码是

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

1 2 3 4 5 6

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

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

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

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；
8、支持Hover等伪类；

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

二、引入EvPNG.js文件

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

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

1 2 3 4 5 6

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

优点和第一种方法一样

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

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

转载于:https://www.cnblogs.com/jiangtuzi/archive/2013/05/27/3101546.html