Web前端页⾯的浏览器兼容性测试⼼得（三）总结⼀些IE8兼容
问题的解决⽅案
由于IE8不⽀持HTML5，⽽它⼜是Win7的默认浏览器，我们即使讨厌它，在这⼏年却也拿它没办法。
最近做了个需要兼容IE8的项⽬，不可避免地⽤了HTML5+CSS3，甚⾄canvas和svg，做兼容⼯作的时候不禁叫苦不迭。⼀个项⽬下来后，倒是收集了⼀些志于让HTML5兼容IE8的库，还有⼀些零散的代码和优雅降级的技巧，整理如下。IE8的兼容⼯作是个⼤活，这篇⽂章还不完整，肯定有很多疏漏和不⾜，望读者能在评论区指正，同时我也会在之后的项⽬中逐渐丰富这篇⽂章。
⼀、HTML5标签兼容⽅案：html5shiv.js
GitHub地址：
IE8不⽀持HTML5的新标签，如<header>、<nav>等标签在IE8⽆法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。
使⽤⽅法：在页⾯中引⽤html5shiv.js⽂件。必须添加在页⾯的<head>元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js ⽂件不能在页⾯底部引⽤。
⼆、CSS3媒体查询兼容⽅案：Respond.js
GitHub地址：
IE8不⽀持CSS媒体查询，对响应式设计⼤⼤不利。Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。
使⽤⽅法：在页⾯中所有css⽂件的引⽤位置之后引⽤Respond.js。⽽且Respond.js的引⽤得越早，⽤户看到页⾯闪烁的机会越⼩。
三、CSS3字体单位“rem”兼容⽅案：rem.js
GitHub地址：
CSS3引⼊了新的字体⼤⼩单位rem，与em的“相对于其⽗元素来设置字体⼤⼩”的功能不同，rem是相对于根元素<html>的字体⼤⼩⽐率单位，成了⽬前主流的单位之⼀。IE9+开始⽀持，IE8就只能通过引⼊js库来⽀持了。
使⽤⽅法：在页⾯中引⽤rem.js⽂件。需要引⽤在页脚，也就是<body>末尾，在所有css⽂件引⽤和DOM元素之后。
四、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);
}
五、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;javascript的特性
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⼀种，等以后遇到了再作补充。
六、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出现问题⽆法载⼊时，会陷⼊死循环。
七、Canvas兼容⽅案：Excanvas.js
下载地址：
Canvas的功能⾮常强⼤，兼容IE8的⼯作也很繁巨。可能有很⼤⼀部分情况要⽤优雅降级，但是⼀些情况下可以使⽤Google出的Excanvas.js库。它是利⽤IE⽀持的VML对象来模拟Canvas的绘图的，有些情况下可⽤，但⽆法穷尽Canvas的所有功能。
使⽤⽅法：在页⾯中引⽤Excanvas.js⽂件，最好在<head>标签中。
具体注意事项可以参考⽂章：
⼋、Canvas+WebGL兼容⽅案：优雅降级
最近WebGL库——Three.js越来越流⾏了，但它只⽀持IE11+，IE8的兼容好像⽆解……所以只能优雅降级，但是效果肯定⼤打折扣。如有兼容⽅案，还请不吝赐教！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。