Skip to main content
 首页 » 编程设计

jQuery ie6-png透明解决(ietester的ie6有问题,原生ie6是没问题的)

2022年07月16日119daizhj
// 不想纵容ie6!主要是学习运用设计模式 
 
 var FixMSIEPng = (function () { 
    if (!document.body.filters) { 
        // 不是MSIE 
        return; 
    } 
    if (7 <= parseFloat(navigator.appVersion.split('MSIE')[1])) { 
        // 排除IE7.0及以上浏览器 
        return; 
    } 
 
    /* 
     创建一个用于下一组循环的私有方法 
     这个方法会为元素设置适当的样式 
     */ 
    function addFilter(e) { 
        // 检查元素是否有style属性,进而包含background 
        // 并确保还没有应用滤镜 
        if (e.style && e.style.background && !e.style.filter) { 
            var src = null; 
            if (src = e.style.backgroundImage.match(/^url\(\"?(.*\.png)\"?\)$/i)) { 
                e.style.backgroundColor = 'transparent'; 
                e.style.backgroundImage = 'url()'; 
                e.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' 
                    + src[1] 
                    + '\',sizingMethod=\'' 
                    + ((e.style.width && e.style.height) ? 'scale' : 'crop') 
                    + '\')'; 
            } 
        } 
    } 
 
    // 创建一个私有的递归处理方法 
    // 将addFilters()方法应用到样式表 
    function processRules(styleSheet) { 
        for (var i in styleSheet.rules) { 
            addFilter(styleSheet.rules[i]); 
        } 
 
        // 递归由@import规则引入的stylesheets 
        if (styleSheet.imports) { 
            for (var j in styleSheet.imports) { 
                processRules(styleSheet.imports[j]); 
            } 
        } 
    } 
 
    var Obj = function () { 
        this.init(); 
    }; 
    Obj.fixedImg=function(){ 
        if (document.images) { 
            var images = document.images; 
            var img = null; 
 
            for (var i = images.length - 1; img = images[i]; i--) { 
                // 检测是不是PNG图像 
                if (img.src && img.src.substring(img.src.length - 3, 
                    img.src.length).toLowerCase() !== 'png') { 
                    // 跳过 
                    continue; 
                } 
 
                // 为外部元素构建style属性 
                var inlineStyle = ''; 
                if (img.align === 'left' || img.align === 'right') { 
                    inlineStyle += 'float:' + img.align + ';'; 
                } 
                if (img.parentElement.nodeName.toUpperCase() === 'A') { 
                    // 这幅图像位于锚中故显示手形光标 
                    inlineStyle += 'cursor: pointer;'; 
                } 
 
                // 将display设置为inline-block以便拥有width 
                // 和height属性,且仍具有适当的定位 
                inlineStyle += 'display:inline-block;'; 
 
                // 取得应用到这个元素的其它css样式 
                if (img.style && img.style.cssText) { 
                    inlineStyle += img.style.cssText; 
                } 
 
                // 通过带有适当样式和信息(如className 
                // 和ID)的<span>标签包围这幅图像 
                img.outerHTML = '<span ' + (img.id ? ' id="' + img.id + '"' : '') 
                    + (img.className ? ' class="' + img.className + '" ' : '') 
                    + ' style="width:' + img.width + 'px;height:' + img.height + 'px;' 
                    + inlineStyle 
                    + ';filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' 
                    + img.src 
                    + '\', sizingMethod=\'scale\');"></span>'; 
            } 
        } 
    }; 
 
    /** 
     * 处理每个样式表 
     */ 
    Obj.fixedLinkStyle=function(){ 
        var styleSheets = document.styleSheets; 
        for (var i = 0, len = styleSheets.length; i < len; i++) { 
            processRules(styleSheets[i]); 
        } 
    }; 
 
    /** 
     * 修复嵌入的样式属性 
     */ 
    Obj.fixedInlineStyle=function(){ 
        if (document.all) { 
            var all = document.all; 
            for (var i = 0, len = all.length; i < len; i++) { 
                addFilter(all[i]); 
            } 
        } 
    }; 
     
    Obj.prototype = { 
        constructor: Obj, 
        init: function () { 
            if (window.attachEvent) { 
                window.attachEvent('onload', function () { 
                    Obj.fixedImg(); 
                    Obj.fixedLinkStyle(); 
                    Obj.fixedInlineStyle(); 
                }); 
            } 
        } 
    }; 
 
    return new Obj(); 
})(); 

  


本文参考链接:https://www.cnblogs.com/webFrontDev/archive/2012/12/16/2820388.html