ie8 PNG的img出现黑色锯齿,ie6下png透明解决办法

ie8下 PNG的img出现黑色锯齿

 

　　今天遇到在个别的ie8下，img png格式图片出现黑色锯齿，之前只知道ie6不知道png图片，这个问题困扰了我许久，然后在查资料后的解决方法如下：

<script>
function correctPNG() {
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters)) {
        var lee_i = 0;
        var docimgs=document.images;
        for (var j = 0; j < docimgs.length; j++) {
            var img = docimgs[j]
            var imgName = img.src.toUpperCase();
            if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
                lee_i++;
                var SpanID = img.id || 'ra_png_' + lee_i.toString();
                var imgData = new Image();
                imgData.proData = SpanID;
                imgData.onload = function () {
                    $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
                }
                imgData.src = img.src;
                var imgID = "id='" + SpanID + "' ";
                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;
            }
        }
    }
}
//判断是否为IE8及以下浏览器，其实除了这三个浏览器不支持addEventListener，其它浏览器都没问题
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
    window.attachEvent("onload", correctPNG);
}
</script>

如果使用png 图片做背景图片，可以使用如下方法：

background-image:url(******.png)!important; 
background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=scale); 

 

IE7和IE8下png图片背景变黑的bug解决方案：

1、不要直接改变图片的透明度，而是给图片套个容器，去修改这个容器的透明度

比如原代码是：<img src="style/images/icon-shadow.png" class="share-list-icon-shadow"  />

修改成：<div class="share-list-icon-shadow"><img src="style/images/icon-shadow.png" /></div>

2、给这个容器加个背景颜色

非常重要，解决bug的关键就在这一步，比如：

一般情况下，到此bug就解决了，如果还是有问题，请看下面：

.share-list-icon-shadow{ 
    width:60px;height:21px; 
    position:absolute;bottom:8px;left:0px;z-index: 1; 
    margin: 0 auto; 
    display:block; 
    background:#FAFDEF; 
}

 

3、给容器加个zoom: 1

zoom: 1起到什么作用呢？为什么IE会存在这个bug呢？

这是二个问题，其实是一个答案。 IE修改透明度，不是通过css属性，而是通过filter滤镜，所以想要理解这个bug，就要从filter滤镜上找原因。 filter作用于一个对象时，这个对象必须是有形体，也就是必须是layout，而IE存在一个很特殊的属性：hasLayout ，这个属性可以赋予容器成layout，hasLayout这个属性有些诡异，你无法通过直接写css启动，而必须通过javascript启动，其实还有一种方法可以启动，就是使用特殊的css属性，变相将hasLayout启动，这个css属性就是 zoom（其他的属性比如display:inline-block、float:left等也行，而只有zoom没什么副作用）