常見IE8兼容性問題及解決


1、css3媒體查詢

IE8不支持媒體查詢

解決:respond.js,在頁面中所有css文件的引用位置之后引用Respond.js

2、HTML5新標簽

IE8不支持H5新標簽

解決:html5shiv.js,在頁面中引用html5shiv.js文件。必須添加在頁面的<head>元素內,因為IE瀏覽器必須在元素解析前知道這個元素,所以這個js文件不能在頁面底部引用。

3、rem不兼容

rem是相對於根元素<html>的字體大小比率單位,成了目前主流的單位之一。IE9+開始支持,IE8就只能通過引入js庫來支持了

解決:在頁面中引用rem.js文件。需要引用在頁腳,也就是<body>末尾,在所有css文件引用和DOM元素之后

4、css3的background-size的cover和contain

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);
}

5、placeholder

placeholder是h5的屬性,ie8不支持

解決:jquery-placeholder

6、last-child

last-child是css3選擇器,ie8不支持

解決:不使用last-child,而是給最后一個元素設置一個.last的class,然后對此進行樣式設置,這樣就全部兼容了

7、數組的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++;
        }
    };
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM