前段时间本站发表过一篇:跨浏览器测试工具、技巧和Css Hac,介绍了一些常用的浏览器工具、解决方案和Hack,对跨浏览器的表现问题做了一些分析。
今天和大家探讨一下IE6.0下显示PNG图片的问题,有人可能会说,现在都用IE8.0或是Firefox,但做为网页设计师来说就得考虑到所有浏览器的兼容性,而且IE6.0的市场占有率还是比较高的。
根据网路调查公司StatCounter最新的浏览器市占率调查结果,到今年7月14日为止,超过5成用户使用IE 6,3成用户使用IE 7,只有不到一成的用户使用Firefox 3.0版,而新版IE 8则有逐渐超越Firefox 3.0的趋势。
下面给大家介绍两种方法
方法1: 将PNG图片转换为flash
1.新建一个flash文件->文件->导入->导入到舞台,然后选择你想要显示在网站中的PNG背景透明图片。状态如下图(本例为了说明PC的背景是透明的,特意为画布增加了背景色)

FLASH中PNG的效果图(灰色为舞台背景色)
2.适当的调整图片的位置,之后即可将Flash导出
3.在网页的适当地方用如下代码调用这个Flash
设置Flash背景透明
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="140" align="middle">
<param name="movie" value="images/top1.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent"> <!--这里代码可使Flash背景透明 -->
<embed src="images/top1.swf" width="600" height="140" align="middle" quality="high"pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>
方法2: 使用js解决IE6显示问题
js代码如下:
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
Copyright 2007 Ignia, LLC
Based in part on code from from http://homepage.ntlworld.com/bobosola.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
function fixPng() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.indexOf(".PNG") > 0) {
var width = img.width;
var height = img.height;
var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
img.src = "images/blank.gif";
img.width = width;
img.height = height;
}
}
}
}
fixPng();
网页中调用这个js:
<script defer type="Text/Javascript" src="js/MSIE.PNG.js"></script>
现在你会看到PNG图片已经透明了,但上面一张图片没显示出来
这是因为JS中我们用到了:
img.src = "images/blank.gif";
只要在图片文件夹下加入这张图就OK了。