常见IE8兼容性问题及解决

时间 2019-11-15

标签常见 ie8 兼容性问题解决栏目浏览器繁體版

原文原文链接

一、css3媒体查询css

IE8不支持媒体查询html

解决：respond.js，在页面中全部css文件的引用位置以后引用Respond.jshtml5

二、HTML5新标签jquery

IE8不支持H5新标签css3

解决：html5shiv.js，在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内，由于IE浏览器必须在元素解析前知道这个元素，因此这个js文件不能在页面底部引用。数组

三、rem不兼容浏览器

rem是相对于根元素<html>的字体大小比率单位，成了目前主流的单位之一。IE9+开始支持，IE8就只能经过引入js库来支持了字体

解决：在页面中引用rem.js文件。须要引用在页脚，也就是<body>末尾，在全部css文件引用和DOM元素以后this

四、css3的background-size的cover和containurl

backgroun-size的cover和contain是css3新引入的属性，IE8不支持

解决：引用“background-size polyfill”库来兼容，“background-size polyfill”的代码文件须要在css中引用。在全部用到这两个“background-size”属性值的地方，加一行“-ms-behavior”属性

.selector { 
    background-size: cover;
    /* 如下相对路径是相对于文档，而非css文件！ */
    /* 使用绝对路径能够避免混淆 */
    -ms-behavior: url(/backgroundsize.min.htc);
}

五、placeholder

placeholder是h5的属性，ie8不支持

解决：jquery-placeholder

六、last-child

last-child是css3选择器，ie8不支持

解决：不使用last-child，而是给最后一个元素设置一个.last的class，而后对此进行样式设置，这样就所有兼容了

七、数组的forEach方法

ie8的数组对象不支持forEach方法

解决：本身实现forEach方法

if ( !Array.prototype.forEach ) {
    Array.prototype.forEach = function forEach( callback, thisArg ) {
        var T, k;
        if ( this == null ) {
            throw new TypeError( "this is null or not defined" );
        }
        var O = Object(this);
        var len = O.length >>> 0;
        if ( typeof callback !== "function" ) {
            throw new TypeError( callback + " is not a function" );
        }
        if ( arguments.length > 1 ) {
            T = thisArg;
        }
        k = 0;
        while( k < len ) {
            var kValue;
            if ( k in O ) {
                kValue = O[ k ];
                callback.call( T, kValue, k, O );
            }
            k++;
        }
    };
}