由于IE8不支持HTML5，而它又是Win7的默认浏览器，我们即使讨厌它，在这几年却也拿它没办法。

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

一、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不支持CSS媒体查询，对响应式设计大大不利。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

“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;

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

参考文章：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="data:image.svg" onerror="this.src='image.png'">

此法有弊端：当image.png出现问题无法载入时，会陷入死循环。

七、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

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

兼容IE8的更多相关文章

  1. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  2. 如何使用videojs兼容IE8浏览器

    需要在服务器下运行 首先我们需要下载videojs包 https://github.com/videojs/video.js/releases 这里简单写了一个小栗子 <!DOCTYPE htm ...

  3. jQuery validate兼容IE8写法

    最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...

  4. 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  5. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  6. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  7. css样式设置图片半透明度，兼容IE8，火狐

    关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...

  8. 兼容ie8 rgba()用法 滤镜filter的用法

    原文  http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...

  9. bootstrap3 兼容IE8浏览器

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...

  10. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

随机推荐

  1. mips64高精度时钟引起ktime_get时间不准，导致饿狗故障原因分析【转】

    转自:http://blog.csdn.net/chenyu105/article/details/7720162 重点关注关中断的情况.临时做了一个版本,在CPU 0上监控所有非0 CPU的时钟中断 ...

  2. 【快速玩转Source Filmmaker】用黑科技做出自己的OC和想要的模型

    [快速玩转Source Filmmaker]用黑科技做出自己的OC和想要的模型https://tieba.baidu.com/p/4154097168

  3. 项目评审ppt的纲要

    1.prd不能模糊,产品的问题全部明确 2.收益在哪里 3.设计体现业务4.怎样保证数据的前后协作5.异常如何处理6.技术解决的痛点7.对外部依赖8.性能指标预期(响应时间)9.

  4. shell常见操作整理（更新）

    查看文件第20到30行的内容 法一:[root@oldboy ~]# seq 100 > ett.txt [root@oldboy ~]# head -30 ett.txt | tail -11 ...

  5. 创建.dat文件（转载）

    比较有用的东比较有用的东西 首先,批处理文件是一个文本文件,这个文件的每一行都是一条DOS命令(大部分时候就好象我们在DOS提示符下执行的命令行一样),你可以使用DOS下的Edit或者Windows的 ...

  6. redis之（十五）redis的集群中的哨兵角色

    一:redis集群的哨兵的目的是什么?. (1)监控主redis和从redis数据库是否正常运行 (2)主redis出现故障,自动将其中一台从redis升级为主redis.将原先的主redis转变成从 ...

  7. （ubuntu） pip install scandir 时出现错误 fatal error: Python.h: No such file or directory

    安装 jupyter时遇到这个问题,在这里查到了解决方法,特记录一下. 解决方式为: 先安装 python-dev: $ sudo apt-get install python-dev 然后再安装需要 ...

  8. python import模块的搜索路径

    当在py代码中import所依赖的模块时, python是从哪里找到这些模块呢,即模块的搜索路径是啥? 默认情况下,Python解释器会搜索当前目录.所有已安装的内置模块和第三方模块,搜索路径存放在s ...

  9. AC日记——Sagheer, the Hausmeister codeforces 812b

    812B - Sagheer, the Hausmeister 思路: 搜索: 代码: #include <cstdio> #include <cstring> #includ ...

  10. 熟悉并了解uml的使用(一)

    本资料对UML各种模型图的构成和功能进行说明,通过本资料的学习达到可以读懂UML模型图的目的.本资料不涉及模型图作成的要点等相关知识. UML简介 UML (Unified Modeling Lang ...