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!那么我们来完善一下吧！

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



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();

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 imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.src=img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}

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