IE6.0下显示PNG图片解决方案

文章来源于：http://www.56mp.cn/post/59.html 前段时间本站发表过一篇：跨浏览器测试工具、技巧和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背景透明 方法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 with DEFER keyword wrapped in conditional comments: */ 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 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： 现在你会看到PNG图片已经透明了，但上面一张图片没显示出来这是因为JS中我们用到了： img.src = "images/blank.gif"; 只要在图片文件夹下加入这张图就OK了。演示效果：http://www.56mp.cn/upload/png/ 此信息出自逸诚科技：http://www.56mp.cn