HO3004: IE6 不支持 PNG24 格式图片的半透明效果

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：钱宝坤

标准参考

无

问题描述

PNG24 格式图片可以携带 Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是 IE6 不支持这种格式原有的透明特性。

造成的影响

带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。

受影响的浏览器

IE6

问题分析

分析以下代码：

<body style=" background-color:#00FF00"> <h3>透明背景的 PNG8 格式图片</h3> <img
                src="png8.png" /> <h3>具有半透明过度背景的 PNG24 格式图片</h3> <img
                src="png24_alpha.png" /> <h3>没有透明效果的 PNG24 格式图片</h3> <img
                src="png24_no_alpha.png" /> </body>

以上代码向页面引入 PNG8 和 PNG24 图片，其中 PNG8 格式图片背景透明，PNG24 格式图片第一张具有半透明通道，第二张不具有透明度通道。

各浏览器显示效果如下：

	IE6	IE7 IE8 Firefox Safari Chrome Opera
PNG8 透明背景图
PNG24 半透明通道图
PNG24 无透明通道图

对照上表可见， IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。其他浏览处理正常，无此问题。

解决方案

使用 IE 专有滤镜 AlphaImageLoader Filter 来修复 IE6 透明通道问题，详情请参考 MSDN 说明： http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx

或者使用脚本批量处理方式：

function fixpng24(){ var arVersion = navigator.appVersion.split("MSIE"); var version =
                    parseFloat(arVersion[1]); if ((version >= 5.5) && (document.body.filters)){ for(var i=0;
                    i<document.images.length; i++){ var img = document.images[i]; if (img.src.toLowerCase().slice(-3)
                    == "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:pointer;" + imgStyle; var
                    strNewHTML = "<span " + imgID + imgClass + imgTitle + " 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--; } } } }

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4 Opera 10.51
测试页面:	ie6_png24_alpha.html
本文更新时间:	2010-08-05