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

淩亂°似流年 2022-06-16 12:25 167阅读 0赞

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

效果对比：  
处理前  
![3][]

处理后：  
![2][]

[3]: /images/20220616/edbfd4f3978b43c59c6bddd5ff556704.png
[2]: /images/20220616/765dae1d035c4a3a89e3efc3a815ba49.png