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兼容

兼容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下生效
    
    
    只在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看文章

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赋值来解决:

参考文章：
https://www.cnblogs.com/yuan-shuai/p/4125511.html

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