最近完成了一个项目，前端使用的是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兼容
兼容html5：
https://blog.csdn.net/s592652578/article/details/72528218
兼容 css3 https://files.cnblogs.com/files/cppfans140812/test.rar
兼容bootstrap3(其实是兼容html5和媒体查询) https://www.cnblogs.com/Lily-nercel/p/6693293.html
兼容canvas https://www.cnblogs.com/zjhs/p/3651743.html
兼容高版本js标准 https://github.com/zhangxinxu/ieBetter.js
。。。此处省略一万字
这些是前人总结兼容性问题做出的工具，但不一定适用于你遇到的问题，还是需要对一些ie兼容问题进行了解：
三、IE hack
加上ie hack之后，在标签内的内容，只有在符合条件时才被渲染出来。可以指定ie版本，大于某版本或小于某版本。
gt 大于
gte 大于等于
lt 小于
lte 小于等于
！不等于
如：
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
使用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看文章
https://blog.csdn.net/freshlover/article/details/12132801
另外，还需了解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;
};
}
或者引入一套已写好的js库解决兼容问题https://github.com/zhangxinxu/ieBetter.js
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赋值来解决:
<!--[if lte 8]>
document.defaultView = window;
<![endif]-->
参考文章：
https://www.cnblogs.com/yuan-shuai/p/4125511.html
以上便是在项目中遇到的兼容性问题解决方法。由于项目本身比较简单，遇到的问题不多，如果以后有更多经验，我会继续整理。
网友评论