ie8和html5的兼容性,ie8网页兼容性不完全指南

最近完成了一个项目，前端使用的是bootstrap3.3.7, jquery版本是1.11.1, 须改成兼容ie8,遇到的问题多多，觉得有必要总结一下。

声明：这不是一篇能解决所有ie8兼容问题的文章，只是我在某项目过程中的经验总结。如果不能解决你遇到的问题，我表示很遗憾。

一、IE8页面调试

ie8页面的调试有几种方法：

1 使用专门调试ie的工具

目前我所查到的调试工具有ietester, 实质是在一个软件中模拟各种ie浏览器的环境，但在win10中安装，网页并不能正常打开，所以后来就放弃了。

2 找一台安装了ie8的电脑

如果你有一台电脑专门测试低版本环境的兼容性，也可以用它来测试，但通常做开发会用配置更高的电脑，所以开发环境和 测试环境被迫分离，会造成不便。

3 安装虚拟机

这是值得推荐的方法。可以在虚拟机安装一个win7, win7安装后默认浏览器版本是ie8,如果不是纯净版的win7，有可能是ie9或更高版本，你需要先把高版本的卸载掉。虚拟机安装时网卡要选择桥接模式，这样虚拟机和外部操作系统的ip会处在同一个网段，可以在外部开发，并在虚拟机内的ie8中输入网址查看。虚拟机真是伟大的发明。

按f12可以弹出开发者工具，但ie8的开发者工具很难用，只能看到报错信息的行数，而且有时指向不明确，也不能在控制台写js,不能直接更改css查看效果。这个时候我只能在外部操作系统开一个其他浏览器，在开发者工具中把疑似ie8不兼容的css给禁用，再写些支持的css, 刷新完之后再在虚拟机中查看效果。而关于js 的兼容，遇到不明确的问题是，我只能靠百度与猜测结合。

二、页面的兼容性及相关js库

页面兼容性包括html5兼容， css兼容， js兼容

。。。此处省略一万字

这些是前人总结兼容性问题做出的工具，但不一定适用于你遇到的问题，还是需要对一些ie兼容问题进行了解：

三、IE hack

加上ie hack之后，在标签内的内容，只有在符合条件时才被渲染出来。可以指定ie版本，大于某版本或小于某版本。

gt 大于

gte 大于等于

lt 小于

lte 小于等于

！不等于

如：

只在IE下生效

只在IE6下生效

只在IE6以上版本生效

只在IE8上不生效

非IE浏览器生效

使用js判断ie版本

除了使用ie hack外，你可能还需要在js运行时判断浏览器版本，你可使用如下方法实现：

(function() {

var utils = {};

utils.browserCheck = function(callback) {

var DEFAULT_VERSION = '8.0';

var ua = navigator.userAgent.toLowerCase();

var isIE = ua.indexOf('msie') > -1;

var safariVersion;

if (isIE) {

safariVersion = ua.match(/msie ([\d.]+)/)[1];

if (safariVersion <= DEFAULT_VERSION) {

callback(true);

} else {

callback(false);

}

}

};

window.ie8fix = utils;

})();

ie8fix.browserCheck(function(isIElt8) {

if (isIElt8) {

document.defaultView = window;

}

});

四、css hack

某些css属性的写法在特定ie版本浏览器才支持，而不支持的浏览器则忽略掉，通过他们可以支持不同版本的浏览器

IE浏览器各版本 CSS hack 对照表

hack

写法

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

Y

Y

N

N

N

N

N

N

N

N

_

_color

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0

color:red\0

N

N

N

N

Y

N

Y

N

Y

N

\9\0

color:red\9\0

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;color:green;

N

N

Y

N

Y

N

Y

N

Y

Y

说明：在标准模式中

“-″减号是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

更多css hack看文章

另外，还需了解ie8对哪些css属性支持，哪些不支持，最直接的方式是查询标准文档。

例如在目前做的项目中，经常遇到的问题是：

ie8不支持background-image 为linear-gradient线性渐变色, 须改用图片；

ie8也不支持flex布局，须改成其它布局；

ie8对before伪类不支持，引入兼容库js后，定位仍会出现问题，须修改边距值；

。。。

五、js兼容

ie8 的宿主环境所支持的方法会有所不同，例如：

ie8 的数组没有map方法，需要自己加上

if (typeof Array.prototype.map != "function") {

Array.prototype.map = function (fn, context) {

var arr = [];

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

arr.push(fn.call(context, this[k], k, this));

}

}

return arr;

};

}

ieBetter本质上是将不支持的方法给对象加上. 但我在项目中发现与echart.js 一起使用时出现了问题。

由于ie8使用的是attachEvent，而非addEventListener,引入ieBetter时，会增加一个addEventListener方法，而echart.js本身又存在兼容ie8的逻辑，检测到浏览器已经有addEventListener方法，就会用ieBetterjs提供的，但echart使用这个方法时却会报错，所以在使用echart.js时就不能引入这个ieBetterjs, 须单独处理每个不兼容方法或者把addEventListener的处理部分删除。

另外，在ie8使用jquery 1.11.1中会报“document.defaultView对象为空或不是对象”的错误,原因是ie8并没有这个对象。

而其实在高版本的浏览器中document.defaultView和window是同一个对象，可以通过在ie hack给document.defaultView赋值来解决:

以上便是在项目中遇到的兼容性问题解决方法。由于项目本身比较简单，遇到的问题不多，如果以后有更多经验，我会继续整理。