IE6真是个烂浏览器,CSS方面已经一堆bug了,连这么优秀的png图片也不兼容,无法透明,透明部分会显示成灰色,倒。
有人会选择换成gif格式,但gif格式虽然可以做到透明,但会有毛边,很不美观,不爽。
在网上找到了几个方法,觉得这个方法最简单,才子修改了一下函数,直接针对IE6有效,其它浏览器不会执行此函数。也就不需要用到IE独有的条件注释来判断了。
看原代码:
<font face="新宋体">function enablePngImages() {<br /> var imgArr = document.getElementsByTagName("IMG");<br /> for(i=0; i<imgArr.length; i++){<br /> if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";<br /> imgArr[i].src = "images/none.gif";<br /> }<br /><br /> if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){<br /> var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";<br /> imgArr[i].style.backgroundImage = "url(images/none.gif)";<br /> }<br /> }<br />}</font>
原理就是通过 javascript 和 css 滤镜来解决。images/none.gif是一张空白一个像素的图片。
调用时要采用IE独有的条件注释来判断,如下:
<font face="新宋体"><!--[if lt IE 7]><br /><script type='text/javascript'><br />enablePngImages();<br /></script><br /><![endif]--></font>
才子觉得这样调用不太方便,改了一下函数,添加了判断IE浏览器版本的代码,调用更方便。看代码:
<font face="新宋体">function enablePngImages() {<br /> var imgArr = document.getElementsByTagName("IMG");<br /> var version = parseFloat(navigator.appVersion.split("MSIE")[1]);<br /><br /> if (version = 6.0 && (document.body.filters)) {<br /> for(var i=0, j=imgArr.length; i<j; i++){<br /> if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";<br /> imgArr[i].src = "images/none.gif";<br /> }<br /><br /> if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){<br /> var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";<br /> imgArr[i].style.backgroundImage = "url(images/none.gif)";<br /> }<br /> }<br /> }<br />}</font>
加了判断IE版本的代码,如果为IE6就执行。
调用如下:
<font face="新宋体">window.onload = function() {<br /> enablePngImages();<br />}</font>
为什么要用window.onload呢?这是表示加载完页面内容再执行指定的函数,保证png图片加载完成了再执行。
做了个演示页面:http://www.54caizi.org/demo/enablePngImages.html