IE6图片透明兼容性问题

最新推荐文章于 2019-07-21 21:23:26 发布

y692071586

最新推荐文章于 2019-07-21 21:23:26 发布

阅读量104

点赞数

分类专栏：浏览器兼容性处理文章标签： IE6 png-24 图片透明兼容性

本文链接：https://blog.csdn.net/y692071586/article/details/84283823

版权

浏览器兼容性处理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先，万恶的IE6是支持png-8的，但是在如今的富客户端下，png-8往往满足不了需求，我们需要跟精细的png-24甚至更高，那么很快问题就来了，IE6是不支持png-24的透明的。一下介绍IE6兼容png-24图片的两种方式：

一、使用滤镜

#test{display:block;width:120px;height:120px;background:url(img/test.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/test.png', sizingMethod='scale')}

需要注意的是，不管这段css代码写在哪里，滤镜中的图片路径都是以使用滤镜的html文件所在位置计算相对位置的；

二、进而可以写一个全局性的修正函数

function fixpng24(){
    var arVersion = navigator.appVersion.split("MSIE");
    var version = parseFloat(arVersion[1]);
    if ((version >= 5.5) && (document.body.filters)){
       for(var i=0; i<document.images.length; i++){
          var img = document.images[i];
          if (img.src.toLowerCase().slice(-3) == "png"){
             var imgID = (img.id) ? "id='" + img.id + "' " : "";
             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:pointer;" + 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;
             i--;
          }
       }
    }
}