IE8兼容性问题的解决方案
Posted xiaominsweet
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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++
}
}
}
目前先写一个，日后再做补充
以上是关于IE8兼容性问题的解决方案的主要内容，如果未能解决你的问题，请参考以下文章