常見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++;
        }
    };
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。