完成IE6下png图片的显示问题

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

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

下面是示例：

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

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

png.js

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);

在图片代码加上这句：<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”images/png.js”></script>
<![endif]–><img src=”images/sale.png” /></span><ol ><!–[if lt IE 7.]>

效果对比：
处理前



处理后：