IE6下的透明PNG错误及其解决方案

最新推荐文章于 2024-04-26 01:18:22 发布

CMutoo

最新推荐文章于 2024-04-26 01:18:22 发布

阅读量1.1k

点赞数

分类专栏：网页开发文章标签： ie filter 浏览器 float class 互联网

本文链接：https://blog.csdn.net/CMutoo/article/details/5366073

版权

网页开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

　　在网页设计的应用中，由于PNG格式的透明图像质量要远高于最多只能索引256色的GIF，所以我更喜欢大量使用PNG图片。但是透明的PNG图片在IE浏览器（6.0及其以下版本）中的表现经常不尽人意，会出现实底化（白底)。虽然IE6的市场份额正在逐年下滑，但仍然占有很大比例。既然改变不了世界，只好想办法适应它了。

　　最近一次遇到这个问题是给我系系网制作欢迎界面时，为了追求画面质量而使用了PNG格式的透明图像，但是在其后的浏览器环境测试下，在IE6这一关停下了脚步。回想起学长 Davchen 去年在做 homepage 的时候也遇到过同样的问题，当时高考复习阶段，没帮上什么忙实在不好意思。现在写这一篇文章也算是给这一桩小事画上个句号吧。

将以下js片段移植到 <head></head> 中即可。

/*修正IE下PNG格式图像透明显示BUG*/ function correctPNG() { //遍历网页中的所有图片 for(var i=0; i<document.images.length; i++) { var img = document.images[i]; var imgName = img.src.toUpperCase(); //过滤出PNG图片 if (imgName.substring(imgName.length-3, imgName.length) == "PNG"); { /* 将 img 标签 <img id='' class='' title='' style='' align='' src="图片地址" mce_src="图片地址"/> 格式化成 span 标签 <span id='' style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘图片地址’, sizingMethod=" mce_style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘图片地址’, sizingMethod="scale');/">'></span> 借助 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Miscrsoft的透明图片加载器) 解决此问题 */ 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 }; }; }; //对IE浏览器启用该函数 if(navigator.userAgent.indexOf("MSIE")>-1) { window.attachEvent("onload", correctPNG); };

* 代码源自互联网 * 注释 Mutoo

这种方法的缺点是，无法直接对作为背景而使用的透明PNG作处理，但只需要从上面的例子举一反三利用 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 解释即可，但工作量可能极大。

IE7/8对该问题处理得还不错，祝愿IE6快快下台吧！

CMutoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
IE6下的透明PNG错误及其解决方案

　　在网页设计的应用中，由于PNG格式的透明图像质量要远高于最多只能索引256色的GIF，所以我更喜欢大量使用PNG图片。但是透明的PNG图片在IE浏览器（6.0及其以下版本）中的表现经常不尽人意，会出现实底化（白底)。虽然IE6的市场份额正在逐年下滑，但仍然占有很大比例。既然改变不了世界，只好想办法适应它了。　　最近一次遇到这个问题是给我系系网制作欢迎界面时，为了追求画面质量而使用了PN
复制链接

扫一扫