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