前端页面兼容ie8解决方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端页⾯兼容ie8解决⽅法
⼀、通⽤兼容⽂件的引⽤：
1、HTML5标签兼容⽅案：html5shiv.js
GitHub地址：
IE8不⽀持HTML5的新标签，如<header>、<nav>等标签在IE8⽆法渲染。
html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。
使⽤⽅法：在页⾯中引⽤html5shiv.js⽂件。
必须添加在页⾯的<head>元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js ⽂件不能在页⾯底部引⽤。
2、CSS3媒体查询兼容⽅案：Respond.js
GitHub地址：
IE8不⽀持CSS媒体查询，对响应式设计⼤⼤不利。
Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。
使⽤⽅法：在页⾯中所有css⽂件的引⽤位置之后引⽤Respond.js。
⽽且Respond.js的引⽤得越早，⽤户看到页⾯闪烁的机会越⼩。
3、CSS3字体单位“rem”兼容⽅案：rem.js
GitHub地址：
CSS3引⼊了新的字体⼤⼩单位rem，与em的“相对于其⽗元素来设置字体⼤⼩”的功能不同，rem是相对于根元素<html>的字体⼤⼩⽐率单位，成了⽬前主流的单位之⼀。
IE9+开始⽀持，IE8就只能通过引⼊js库来⽀持了。
使⽤⽅法：在页⾯中引⽤rem.js⽂件。
需要引⽤在页脚，也就是<body>末尾，在所有css⽂件引⽤和DOM元素之后。
4、CSS3“background-size”属性的“cover”和“contain”属性值兼容⽅案：background-size polyfill
GitHub地址：
“background-size”是CSS3新引⼊的属性，其中有两个属性值⾮常常⽤，分别为“cover”和“contain”。
“cover”可以把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域，背景图像的某些部分也许⽆法显⽰在背景定位区域中。
“contain”可以把图像图像扩展⾄最⼤尺⼨，以使其宽度和⾼度完全适应内容区域。
IE8同样不⽀持，⾮常不⽅便。
这时可以引⽤“background-size polyfill”库来兼容。
使⽤⽅法：与以上⼏个库不同，“background-size polyfill”的代码⽂件需要在css中引⽤。
在所有⽤到这两个“background-size”属性值的地⽅，加⼀⾏“-ms-behavior”属性：
.selector {
background-size: cover;
/* 以下相对路径是相对于⽂档，⽽⾮css⽂件！ */
/* 使⽤绝对路径可以避免混淆 */
-ms-behavior: url(/backgroundsize.min.htc);
}
5、JS数组的forEach⽅法兼容⽅案：⾃⾏实现
IE8的数组对象没有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++;
}
};
}
此外，IE8不⽀持的js特性不⽌forEach⼀种，等以后遇到了再作补充。
6、SVG图形兼容⽅案：优雅降级
参考⽂章：
对于svg图形是真的⽆法直接兼容了，因此使⽤优雅降级，在IE8下显⽰替代的jpg、png或gif图⽚。
有三种⽐较实⽤的⽅法：⼀是⽤js修改<img>的src属性，这⾥省略；⼆是⽤HTML的hack实现优雅降级，类似于如下代码：
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>
⽀持<svg>标签的浏览器会显⽰svg.svg，⽼版本浏览器会⽆视<svg>标签，渲染<image>标签，从⽽显⽰svg.png。
此外，还有⼀种⽐较巧妙的⽅法：
<img src="image.svg" onerror="this.src='image.png'">
此法有弊端：当image.png出现问题⽆法载⼊时，会陷⼊死循环。
7、Canvas兼容⽅案：Excanvas.js
下载地址：
Canvas的功能⾮常强⼤，兼容IE8的⼯作也很繁巨。
可能有很⼤⼀部分情况要⽤优雅降级，但是⼀些情况下可以使⽤Google出的Excanvas.js库。
它是利⽤IE⽀持的VML对象来模拟Canvas的绘图的，有些情况下可⽤，但⽆法穷尽Canvas的所有功能。
使⽤⽅法：在页⾯中引⽤Excanvas.js⽂件，最好在<head>标签中。
具体注意事项可以参考⽂章：
8、Canvas+WebGL兼容⽅案：优雅降级
最近WebGL库——Three.js越来越流⾏了，但它只⽀持IE11+，IE8的兼容好像⽆解……所以只能优雅降级，但是效果肯定⼤打折扣。
如有兼容⽅案，还请不吝赐教！。