关于IE6透明图片显示的兼容问题
相信很多人都在为IE6种种的不兼容烦恼吧，笔者也是其中一个。
下面我就向大家介绍一下我是如何处理png图片在IE6中会显示灰色背景的情况：
一、图片格式的区别
一般自己在photoshop作图不去调整颜色模式，存的都是24位png图片，而我
们用web存储的话可以选择gif以及索引色8位的png（以下简称png8）图片。
本来以为IE6可以兼容gif和png8图片，可是放上去一试就发现问题：
如上面的例子，gif和png-8格式的图片都出现边缘锯齿的现象，所以就考虑解决png-24透明问题是否会更好？我们可以看到，普通的png图片在IE6下显示会出现灰色背景，这是什么原因呢？
其实，png-24 格式图片可以携带 Alpha 半透明通道，呈现从透明到不透明间过渡色彩效果，但是 IE6 不支持该格式的透明特性，所以带有半透明通道的 png-24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。
二、修正兼容性
本文也主要讲解如何解决png-24格式图片在IE6显示问题。
我们可以添加过滤器来解决这样的问题，定义样式中的FILTER，语法如下：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。 image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
下面我们把样式添加进去然后测试一下：
<html> <head><title>IE6透明图片测试</title></head> <body style="background-color:black;"> <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src=logo.png);background:none;width:200px;height:267px;"> <div style="position:relative;"></div> </div> </body> </html>
可以看出，在IE6已经可以兼容，这时再测试一下其他内核浏览器，发现都显示不出实例图片logo.png。
这时，我们就想到可以用脚本来判断浏览器的版本，然后选择要不要使用过滤器，脚本代码如下：
<html>
<head><title>IE6透明图片测试</title>
<script language="JavaScript">
function solvePNG() //解决PNG在IE5.5和IE6中显示问题
{
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j];
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;
j = j-1;
}
}
}
}
window.attachEvent("onload", solvePNG);
</script>
</head>
<body style="background-color:black;">
<img src="logo.png" />
</body>
</html>
这样就解决了png在浏览器中的兼容性问题，在IE6，IE7以上，FF，Opera，safari上都测试成功。
