IE6 和 Firefox 同时支持 PNG 透明图片的方法

1. 原理

IE6 默认不支持 PNG 图片的半透明效果, 但由于它是 XP 系统默认的浏览器,目前仍被广泛的使用. 解决此问题的方法是在 Html 中加入 Javascript,

其中判断当浏览器是低版本 IE 时对 Html 中的 PNG 做相应处理.

2. 代码

只需在 Html 开头加入以下 Javascript 脚本即可

<scriptlanguage="JavaScript">

function correctPNG() // correctly handlePNG transparency in Win IE 5.5 & 6.

{

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]

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="" +"width:" + img.width + "px; height:" + img.height +"px;" +

imgStyle + ";"

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src='" + img.src + "',sizingMethod='scale');">"

img.outerHTML = strNewHTML

i = i-1

}

}

}

}

window.attachEvent("onload",correctPNG);

3. 示例
具体效果见网页

[http://oatmental123.sinaapp.com/slim/

](http://oatmental123.sinaapp.com/slim/)

通过在 Firefox 浏览器中点右键, 查看网页源代码, 可参考其具体代码.