常見IE8兼容性問題及解決

1、css3媒體查詢

IE8不支持媒體查詢

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

2、HTML5新標(biāo)簽

IE8不支持H5新標(biāo)簽

解決:html5shiv.js,在頁面中引用html5shiv.js文件。必須添加在頁面的<head>元素內(nèi),因?yàn)镮E瀏覽器必須在元素解析前知道這個(gè)元素,所以這個(gè)js文件不能在頁面底部引用。

3、rem不兼容

rem是相對(duì)于根元素<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中引用。在所有用到這兩個(gè)“background-size”屬性值的地方,加一行“-ms-behavior”屬性
.selector {
background-size: cover;
/* 以下相對(duì)路徑是相對(duì)于文檔,而非css文件! /
/
使用絕對(duì)路徑可以避免混淆 */
-ms-behavior: url(/backgroundsize.min.htc);
}

5、placeholder

placeholder是h5的屬性,ie8不支持

解決:jquery-placeholder

6、last-child

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

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

7、數(shù)組的forEach方法

ie8的數(shù)組對(duì)象不支持forEach方法

解決:自己實(shí)現(xiàn)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++;
}
};
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,801評(píng)論 1 45
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,799評(píng)論 0 3
  • 由于IE8不支持HTML5,而它又是Win7的默認(rèn)瀏覽器,我們即使討厭它,在這幾年卻也拿它沒辦法。 最近做了個(gè)需要...
    lueyoo閱讀 1,171評(píng)論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,114評(píng)論 1 92
  • 請(qǐng)參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,760評(píng)論 2 19

友情鏈接更多精彩內(nèi)容