IE浏览器兼容小结

前端 2021-10-30 650

css3的选择器兼容

可以在ie8中兼容css3的选择器

1.DOMAssistantCompressed.js + ie-css3.js 必须使用外联样式,内联样式无效

不同分辨率屏幕的兼容问题

可以使用rem单位,在ie9+中可以兼容,但是ie8不兼容,需要在ie8中兼容,需要使用rem.js 同样的,不可以使用内联样式,需要使用外部css,使用rem时图片的宽和高也需要设置rem

<script>
    // 根据屏幕分辨率,重新设置html的font-size
    function handleResize() {
        var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var htmlDom = document.getElementsByTagName('html')[0];
        htmlDom.style.fontSize = 100 / 1920 * htmlWidth + 'px';
    }

    handleResize();
    window.onresize = handleResize;
</script>

适合ie6+浏览器的轮播图插件

superslider.js

官网:http://www.superslide2.com/

可在ie8+浏览器中使用的播放器插件

video.js,但是实际在使用时,却发现ie8不支持,video.js官方提示ie8下会加载flash播放器, 而flash插件却已经不在支持

ie浏览器中css hack

css hack可以让css代码根据hack语法在特定的ie浏览器中渲染 其余部分包含ie 条件注释法,但是只支持到ie10

介绍: https://blog.csdn.net/dayu9216/article/details/70225261/

ie8浏览器中使用rgba语法

https://www.cnblogs.com/iflygofy/p/7008770.html 主要是使用filter

ie浏览器中使用border-radius

在CSS文件中引入PIE.htc文件时没有这样的问题

opcity无效

div{ opacity:0.8; filter:Alpha(opacity=80); }

ie8绝对定位的元素居中问题

只需要设置margin-left:-元素的一半像素

div{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

也可以使用

-ms-transform:translate(-50%, 0);

ie9+可使用transform: translateX(-50%);

ie下input placeholer无效处理(IE6+)

可采用jquery-placeholer.js解决,一般情况下确实没有问题,如果你希望可以通过点击按钮或图标查看密码,即动态切换input的type,则该插件就会有bug

ie低版本下,loading动画使用(IE6+)

可使用spin.js低版本的插件

介绍地址:https://www.html5tricks.com/demo/jquery-loading-spin-js/index.html

弹窗提示插件(IE9+)

界面非常类似element

使用:

<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
cocoMessage.config({
    //配置全局参数    
    duration: 10000,
});
//对参数没有顺序要求,
cocoMessage会根据参数的数据类型进行解析
cocoMessage.info(3000, "请先登录!", function () {
    console.log("close");
});
//可以使用dom节点做内容 
var div = document.createElement("div");
div.innerText = "修改成功!";
cocoMessage.success(div); //duration为0时显示关闭按钮
cocoMessage.warning("需要手动关闭", 0);
cocoMessage.error("修改失败!", 3000); //loading可以选择是否展示关闭按钮 
var closeMsg = cocoMessage.loading(true);
setTimeout(function () {
    closeMsg();
}, 4000);
cocoMessage.destroyAll();

该插件在IE9下,提示框需要修改样式,修改如下:

dd

遮罩插件 jquery.mloading.js(IE8+)

地址:https://www.jq22.com/jquery-info12227

3D轮播插件(IE6+)

jquery.easing.1.3.js+jquery.roundabout.min.js 插件效果:https://www.jq22.com/jquery-info21879

判断IE

1、判断IE浏览器的具体版本

function IEVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
            return 7;
        } else if (fIEVersion == 8) {
            return 8;
        } else if (fIEVersion == 9) {
            return 9;
        } else if (fIEVersion == 10) {
            return 10;
        } else {
            return 6;//IE版本<=7
        }
    } else if (isEdge) {
        return 'edge';//edge
    } else if (isIE11) {
        return 11; //IE11  
    } else {
        return -1;//不是ie浏览器
    }
}

2、判断是否是IE 11及以下或者其他(其他里包括IE edge)

function isIE() {
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
    } else {
        return false;
    }
}

浏览器页面置灰

/*主流浏览器*/
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
    zoom: 1;
}

* {
    filter: gray(enabled=1) !important;
}

/*或者(我为了保险起见,两段代码都添加了)*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    filter: gray(enabled=1) !important;
}
/*end*/

IE浏览器

<script>
/*
* -- grayscale.js --
* Copyright (C) James Padolsey (http://james.padolsey.com)
*
*/
var grayscale = (function () {
    var config = {
        colorProps: ['color', 'backgroundColor', 'borderBottomColor', 'borderTopColor', 'borderLeftColor',
            'borderRightColor', 'backgroundImage'],
        externalImageHandler: {
            /* Grayscaling externally hosted images does not work
                    - Use these functions to handle those images as you so desire */
            /* Out of convenience these functions are also used for browsers
                    like Chrome that do not support CanvasContext.getImageData */
            init: function (el, src) {
                if (el.nodeName.toLowerCase() === 'img') {
                    // Is IMG element...
                } else {
                    // Is background-image element:
                    // Default - remove background images
                    data(el).backgroundImageSRC = src;
                    el.style.backgroundImage = '';
                }
            },
            reset: function (el) {
                if (el.nodeName.toLowerCase() === 'img') {
                    // Is IMG element...
                } else {
                    // Is background-image element:
                    el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
                }
            }
        }
    },
        log = function () {
            try {
                window.console.log.apply(console, arguments);
            } catch (e) { };
        },
        isExternal = function (url) {
            // Checks whether URL is external: 'CanvasContext.getImageData'
            // only works if the image is on the current domain.
            return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
        },
        data = (function () {
            var cache = [0],
                expando = 'data' + (+new Date());
            return function (elem) {
                var cacheIndex = elem[expando],
                    nextCacheIndex = cache.length;
                if (!cacheIndex) {
                    cacheIndex = elem[expando] = nextCacheIndex;
                    cache[cacheIndex] = {};
                }
                return cache[cacheIndex];
            };
        })(),
        desatIMG = function (img, prepare, realEl) {
            // realEl is only set when img is temp (for BG images)
            var canvas = document.createElement('canvas'),
                context = canvas.getContext('2d'),
                height = img.naturalHeight || img.offsetHeight || img.height,
                width = img.naturalWidth || img.offsetWidth || img.width,
                imgData;
            canvas.height = height;
            canvas.width = width;
            context.drawImage(img, 0, 0);
            try {
                imgData = context.getImageData(0, 0, width, height);
            } catch (e) { }
            if (prepare) {
                desatIMG.preparing = true;
                // Slowly recurse through pixels for prep,
                // :: only occurs on grayscale.prepare()
                var y = 0;
                (function () {
                    if (!desatIMG.preparing) {
                        return;
                    }
                    if (y === height) {
                        // Finished!
                        context.putImageData(imgData, 0, 0, 0, 0, width, height);
                        realEl ? (data(realEl).BGdataURL = canvas.toDataURL()) :
                            (data(img).dataURL = canvas.toDataURL())
                    }
                    for (var x = 0; x < width; x++) {
                        var i = (y * width + x) * 4;
                        // Apply Monoschrome level across all channels:
                        imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] =
                            RGBtoGRAYSCALE(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);
                    }
                    y++;
                    setTimeout(arguments.callee, 0);
                })();
                return;
            } else {
                // If desatIMG was called without 'prepare' flag
                // then cancel recursion and proceed with force! (below)
                desatIMG.preparing = false;
            }
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    var i = (y * width + x) * 4;
                    // Apply Monoschrome level across all channels:
                    imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] =
                        RGBtoGRAYSCALE(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);
                }
            }
            context.putImageData(imgData, 0, 0, 0, 0, width, height);
            return canvas;
        },
        getStyle = function (el, prop) {
            var style = document.defaultView && document.defaultView.getComputedStyle ?
                document.defaultView.getComputedStyle(el, null)[prop] :
                el.currentStyle[prop];
            // If format is #FFFFFF: (convert to RGB)
            if (style && /^#[A-F0-9]/i.test(style)) {
                var hex = style.match(/[A-F0-9]{2}/ig);
                style = 'rgb(' + parseInt(hex[0], 16) + ',' +
                    parseInt(hex[1], 16) + ',' +
                    parseInt(hex[2], 16) + ')';
            }
            return style;
        },
        RGBtoGRAYSCALE = function (r, g, b) {
            // Returns single monochrome figure:
            return parseInt((0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10);
        },
        getAllNodes = function (context) {
            var all = Array.prototype.slice.call(context.getElementsByTagName('*'));
            all.unshift(context);
            return all;
        };
    var init = function (context) {

        // Handle if a DOM collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodeName) {
            // Is a DOM collection:
            var allContexts = Array.prototype.slice.call(context),
                cIndex = -1,
                cLen = allContexts.length;
            while (++cIndex < cLen) {
                init.call(this, allContexts[cIndex]);
            }
            return;
        }
        context = context || document.documentElement;
        if (!document.createElement('canvas').getContext) {
            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
            context.style.zoom = 1;
            return;
        }
        var all = getAllNodes(context),
            i = -1,
            len = all.length;

        while (++i < len) {
            var cur = all[i];
            if (cur.nodeName.toLowerCase() === 'img') {
                var src = cur.getAttribute('src');
                if (!src) {
                    continue;
                }
                if (isExternal(src)) {
                    config.externalImageHandler.init(cur, src);
                } else {
                    data(cur).realSRC = src;
                    try {
                        // Within try statement just encase there's no support....
                        cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();
                    } catch (e) {
                        config.externalImageHandler.init(cur, src);
                    }
                }
            } else {
                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
                    var prop = config.colorProps[pIndex],
                        style = getStyle(cur, prop);
                    if (!style) {
                        continue;
                    }
                    if (cur.style[prop]) {
                        data(cur)[prop] = style;
                    }
                    // RGB color:
                    if (style.substring(0, 4) === 'rgb(') {
                        var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));
                        cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';
                        continue;
                    }
                    // Background Image:
                    if (style.indexOf('url(') > -1) {
                        var urlPatt = /\(['"]?(.+?)['"]?\)/,
                            url = style.match(urlPatt)[1];
                        if (isExternal(url)) {
                            config.externalImageHandler.init(cur, url);
                            data(cur).externalBG = true;
                            continue;
                        }
                        // data(cur).BGdataURL refers to caches URL (from preparation)
                        try {
                            var imgSRC = data(cur).BGdataURL || (function () {
                                var temp = document.createElement('img');
                                temp.src = url;
                                return desatIMG(temp).toDataURL();
                            })();

                            cur.style[prop] = style.replace(urlPatt, function (_, url) {
                                return '(' + imgSRC + ')';
                            });
                        } catch (e) {
                            config.externalImageHandler.init(cur, url);
                        }
                    }
                }
            }
        }
    };
    init.reset = function (context) {
        // Handle if a DOM collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodeName) {
            // Is a DOM collection:
            var allContexts = Array.prototype.slice.call(context),
                cIndex = -1,
                cLen = allContexts.length;
            while (++cIndex < cLen) {
                init.reset.call(this, allContexts[cIndex]);
            }
            return;
        }
        context = context || document.documentElement;
        if (!document.createElement('canvas').getContext) {
            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';
            return;
        }
        var all = getAllNodes(context),
            i = -1,
            len = all.length;
        while (++i < len) {
            var cur = all[i];
            if (cur.nodeName.toLowerCase() === 'img') {
                var src = cur.getAttribute('src');
                if (isExternal(src)) {
                    config.externalImageHandler.reset(cur, src);
                }
                cur.src = data(cur).realSRC || src;
            } else {
                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
                    if (data(cur).externalBG) {
                        config.externalImageHandler.reset(cur);
                    }
                    var prop = config.colorProps[pIndex];
                    cur.style[prop] = data(cur)[prop] || '';
                }
            }
        }
    };
    init.prepare = function (context) {
        // Handle if a DOM collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodeName) {
            // Is a DOM collection:
            var allContexts = Array.prototype.slice.call(context),
                cIndex = -1,
                cLen = allContexts.length;
            while (++cIndex < cLen) {
                init.prepare.call(null, allContexts[cIndex]);
            }
            return;
        }
        // Slowly recurses through all elements
        // so as not to lock up on the user.
        context = context || document.documentElement;
        if (!document.createElement('canvas').getContext) {
            return;
        }
        var all = getAllNodes(context),
            i = -1,
            len = all.length;
        while (++i < len) {
            var cur = all[i];
            if (data(cur).skip) {
                return;
            }
            if (cur.nodeName.toLowerCase() === 'img') {
                if (cur.getAttribute('src') && !isExternal(cur.src)) {
                    desatIMG(cur, true);
                }

            } else {
                var style = getStyle(cur, 'backgroundImage');
                if (style.indexOf('url(') > -1) {
                    var urlPatt = /\(['"]?(.+?)['"]?\)/,
                        url = style.match(urlPatt)[1];
                    if (!isExternal(url)) {
                        var temp = document.createElement('img');
                        temp.src = url;
                        desatIMG(temp, true, cur);
                    }
                }
            }
        }
    };
    return init;
})();
grayscale(document.body);
$(function () {
    console.log("grayscale");
    grayscale(document.body);
})

 

标签:前端

文章评论

评论列表

已有0条评论