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