IE8兼容性问题的解决方案
前几天,面试到Ie8的一些兼容问题,傻眼了,回想自己做了将近2年的移动端项目,ie兼容似乎没怎么做过。所以私下便开始找找ie兼容的视频或者文章学习,唉,还是不买书了,家里那么多书,都没看过呢,好了,开始发一波福利:
一、HTML5标签兼容方案:html5shiv.js
GitHub地址:https://github.com/aFarkas/html5shiv/
IE8不支持HTML5的新标签,如<header>、<nav>等在IE8无法渲染,html5shiv.js 可帮助IE6-8浏览器兼容HTML5语义化标签
使用方法:在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部引用。
二、CSS3媒体查询兼容方案:Respond.js
GitHub地址:https://github.com/scottjehl/Respond
IE8不支持css3媒体查询,对响应式布局大大不利,Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件
使用方法:在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早,用户看到页面闪烁的机会越小。
三、CSS3字体单位“rem”兼容方案:rem.js
GitHub地址:https://github.com/chuckcarpenter/REM-unit-polyfill
css3引入了新的字体大小单位rem,与em的“相对于其父元素来设置字体大小”的功能不同,rem是相对于根元素<html>的字体大小比率单位,成了目前的主流单位之一,IE9+开始支持,IE8就只能通过引入js库来支持了,
使用方法:在页面中引用rem.js文件。需要引用在页脚,也就是<body>末尾,在所有css文件引用和DOM元素之后。
四、CSS3“background-size”属性的“cover”和“contain”属性值兼容方案:background-size polyfill
GitHub地址:https://github.com/louisremi/background-size-polyfill
具体使用方法,一看便知
五、JS数组的forEach方法兼容方案:自行实现
IE8的数组对象没有forEach方法,所以自行声明即可,代码如下:
if ( !Array.prototype.forEach) {
Array.prototype.forEach = function froEach (callback, thisArg) {
if (this == null) {
throw new TypeError("this is null or not defined")
}
let o = Object(this)
let len = o.length >>> 0 (无符号右移0位)
if ( typeof callback !== 'function') {
throw new TypeError( callback + " is not a function")
}
let k = 0, t;
if ( argument.length > 1 ) {
t = thisArg
}
while (k < len) {
let kValue;
if ( k in o) {
kValue = o[k]
callback.call(T, kValue, k , o)
}
k++
}
}
}
目前先写一个,日后再做补充