IE6不支持PNG图片透明效果的完美解决方案（完善版)

可怜的IE6，不支持PNG图片透明，

这已经是其众多“BUG”中，不是那么显眼的一个，

但也是让部分人头痛的一个了。

（今天在机房那破机器上IE6忘了抓图了，现在想给大家看效果也难啊。）

发个PNG大家看看。 如果用IE6的朋友，请在下面回复截个图！谢谢啦。

[attach]641886[/attach]

想查看区别的，请到这个页面

http://www.54caizi.org/demo/enablePngImages.html

所以，只有借助滤镜来实现透明了。

方法一： 复制内容到剪贴板

代码:

<div align="center" style="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png图片路径 ',sizingMethod='image'); " width="100px" height="100px"></div>这样的话，需要在每一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=\"" + "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);然后在网页底部加上 复制内容到剪贴板

代码:

<script type="text/javascript" src="png.js"></script>经过实际测试。

这种方法在普通模式下，问题不大。

但是问题来了：

1、如果图片未指明大小（width/height），那么，最终显示的尺寸将是（0px*0px），也就是说：啥也没有。

2、如果把图片放在隐藏层中（<div style="display:none;">...），那么，同上。程序获得不到图片大小。

这么一来，也不能完美解决了。

OK!那么我们来完善一下吧！

既然获取不到代码中的图片尺寸，我们何不直接读取图片的实际尺寸呢？ 复制内容到剪贴板

代码:

<!--对于隐藏层中的图片，或者其他原因导致图片尺寸无法获得-->

<!--此时我们需要读取图片的真实大小-->

<!--以免宽高都为0px而导致图片不显示-->

var imgTrueWidth=0;

var imgTrueHeight=0;

if(img.width==0)

{

var imgPng=new Image();

imgPng.src=img.src;

imgTrueWidth=imgPng.width;

imgTrueHeight=imgPng.height;

}我们通过 Image对象，来获得其真实大小。然后最终代码如下： 复制内容到剪贴板

代码:

function correctPNG4IE6()

{

//获得全部图片

var imgs=document.getElementsByTagName("IMG");

for(var i=0; i<imgs.length; i++)

{

var img = imgs[i];

var imgName = img.src.toUpperCase();

<!--操作PNG图片-->

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;

<!--对于隐藏层中的图片，或者其他原因导致图片尺寸无法获得-->

<!--此时我们需要读取图片的真实大小-->

<!--以免宽高都为0px而导致图片不显示-->

var imgTrueWidth=0;

var imgTrueHeight=0;

if(img.width==0)

{

var imgPng=new Image();

imgPng.src=img.src;

imgTrueWidth=imgPng.width;

imgTrueHeight=imgPng.height;

}

<!--用<span>替换<img>标签-->

var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"";

strNewHTML=strNewHTML+"width:" + (img.width==0?imgTrueWidth:img.width) + "px; height:";

strNewHTML=strNewHTML+(img.height==0?imgTrueHeight:img.height) + "px;";

strNewHTML=strNewHTML+imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";

strNewHTML=strNewHTML+"(src='" + img.src + "', sizingMethod='scale');\"></span>";

<!--执行替换-->

img.outerHTML = strNewHTML;

i = i-1;

}

}

}

<!--加载完毕，执行代码-->

window.attachEvent("onload", correctPNG4IE6);