解决IE6下无法显示png图片问题

 

由于png图片在ie6下不能正常显示，经过多方查找资料，一个比较通用的方式就是采用滤镜：

这个方法有一个不太好的地方，就是会破坏原来的<img>,因为他是将<img>替换为了<span>，img里面的很多属性都丢失了。

下面是示例：

 

设计师们都知道，透明背景的图片一般有两种，gif格式和PNG格式，但gif格式的透明背景图片会有锯齿，这让产品图片减分。如果做成PNG格式，IE6却不支持，还是会默认显示背景为灰色。那有没有完美的解决方法呢？

通过JS来实现IE6兼容PNG透明效果：

png.js

在图片代码加上这句：<!–[if lt IE 7.]>
function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style='/' mce_style='/'" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=/'" + img.src + "/', sizingMethod='scale');/"+"></span>" img.outerHTML = strNewHTML i = i-1 } } } window.attachEvent("onload", correctPNG);

<script defer type=”text/javascript” src=”images/png.js”></script>
<![endif]–><img src=”images/sale.png” /></span><ol ><!–[if lt IE 7.]>

效果对比：
处理前

处理后：