Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案

时间 2020-05-26

标签 web 前端页面浏览器兼容性测试心得总结一些 ie8 兼容问题解决方案栏目 HTML 繁體版

原文原文链接

因为IE8不支持HTML5，而它又是Win7的默认浏览器，咱们即便讨厌它，在这几年却也拿它没办法。css

最近作了个须要兼容IE8的项目，不可避免地用了HTML5+CSS3，甚至canvas和svg，作兼容工做的时候不由叫苦连天。一个项目下来后，却是收集了一些志于让HTML5兼容IE8的库，还有一些零散的代码和优雅降级的技巧，整理以下。IE8的兼容工做是个大活，这篇文章还不完整，确定有不少疏漏和不足，望读者能在评论区指正，同时我也会在以后的项目中逐渐丰富这篇文章。html

1、HTML5标签兼容方案：html5shiv.js

GitHub地址：https://github.com/aFarkas/html5shiv/html5

IE8不支持HTML5的新标签，如<header>、<nav>等标签在IE8没法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。git

使用方法：在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内，由于IE浏览器必须在元素解析前知道这个元素，因此这个js文件不能在页面底部引用。github

2、CSS3媒体查询兼容方案：Respond.js

GitHub地址：https://github.com/scottjehl/Respondcanvas

IE8不支持CSS媒体查询，对响应式设计大大不利。Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。数组

使用方法：在页面中全部css文件的引用位置以后引用Respond.js。并且Respond.js的引用得越早，用户看到页面闪烁的机会越小。浏览器

3、CSS3字体单位“rem”兼容方案：rem.js

GitHub地址：https://github.com/chuckcarpenter/REM-unit-polyfillsvg

CSS3引入了新的字体大小单位rem，与em的“相对于其父元素来设置字体大小”的功能不一样，rem是相对于根元素<html>的字体大小比率单位，成了目前主流的单位之一。IE9+开始支持，IE8就只能经过引入js库来支持了。wordpress

使用方法：在页面中引用rem.js文件。须要引用在页脚，也就是<body>末尾，在全部css文件引用和DOM元素以后。

4、CSS3“background-size”属性的“cover”和“contain”属性值兼容方案：background-size polyfill

GitHub地址：https://github.com/louisremi/background-size-polyfill

“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图形兼容方案：优雅降级

参考文章：http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/

对于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

下载地址：http://code.google.com/p/explorercanvas/downloads/list

Canvas的功能很是强大，兼容IE8的工做也很繁巨。可能有很大一部分状况要用优雅降级，可是一些状况下可使用Google出的Excanvas.js库。它是利用IE支持的VML对象来模拟Canvas的绘图的，有些状况下可用，但没法穷尽Canvas的全部功能。

使用方法：在页面中引用Excanvas.js文件，最好在<head>标签中。

具体注意事项能够参考文章：http://rockyuse.iteye.com/blog/1618298

8、Canvas+WebGL兼容方案：优雅降级

最近WebGL库——Three.js愈来愈流行了，但它只支持IE11+，IE8的兼容好像无解……因此只能优雅降级，可是效果确定大打折扣。若有兼容方案，还请不吝赐教！