IE浏览器的兼容性问题

现在的PC端开发，IE需要考虑就只剩下 IE9/10/11。其他版本的IE基本已经没有使用了，客户方的开发也基本剩下这3个版本IE的兼容考虑了。

win7自带的是 IE8 浏览器，所以 IE8 浏览器，有可能会碰到有要求的客户，不过也好沟通。 实在不行，就页面降级，也比兼容IE8以下的好。

浏览器兼容性测试可以使用 use i can : https://caniuse.com/

一、CSS 的兼容性问题。【标签的兼容，不用考虑很好解决】

　　ie9/10/11对css的属性都是 部分支持。ie11已经大部分支持了，还是有一些常用属性不支持的。

• CSS 有兼容性的属性：https://blog.csdn.net/weixin_44860135/article/details/89473087

1. 渐变色：ie9/10/11 好像都不支持，有待验证。
2. select下拉默认样式清除：
3. flex布局：flex布局在IE10和IE11中使用具有 '时效性' , 在标签是行内标签的时候justify-content的效果是不生效的。
4. video标签的尺寸：ie9虽然支持video标签，但不是很完美，屏幕宽度很小

• CSS 兼容性的解决方案：

　　1、IE条件注释法： IE10+ 已经不再支持 条件注释。

　　　　a、IE 识别的注释：

    <!--[if IE]> 
          所有的IE可识别 
    <![endif]-->     

　　　　b、非IE 识别的注释：

    <!--[if !IE]><!-->
              除IE外都可识别 
    <!--<![endif]-->    

　　2、CSS 属性  前缀法：

　　　　a、

　　3、CSS 属性值 后缀发：

　　　　\0：IE8/9/10 【IE11无效】

　　　　\9：

　　4、选择器 前缀法：

　　　　-ms-：【IE10好像无效，待验证】

　　5、 媒体查询法：【亲测有效，在ie10/11上】  参考：https://blog.csdn.net/jsyxiaoba/article/details/100765815

　　@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  　　.aaa{padding: 0 6px;}
　　}

　　　css修改小的话，推荐这种处理，现在的IE兼容性问题，主要考虑IE11/10/9，其他的版本就不用考虑了。这种方法不能兼容IE9,就加一个 \0或\9解决就可以了。

二、es5 的兼容性问题。【IE浏览器都不支持 es6+ 的语法】

　　 IE9/IE10/IE11  对 es6+ 的语法都是不支持的，开发环境没有使用编译工具(webpack 或 gulp)的，必要使用es5 以下的语法。【编译器无法降级的，再考虑】

　　 PC页面的开发，一定要考虑IE的兼容性问题，最少都要考虑IE10/11，不然最后一定是在填坑的过程。(说多了，都是心酸泪)

• es5 有兼容性的 API：

　　1、FormData：IE9 不用使用，IE10/IE11 有待验证。

　　2、

• es5 兼容性 解决方案：【大体是，不能用的API就不使用，使用支持的语法实现，相应的功能】

　　1、ie 浏览器文件上传 ：https://www.cnblogs.com/ylxmt/p/10132621.html

　　　　IE9及以下浏览器，js中是 不支持 FormData对象的。所以文件上传只能使用 from 表单控件上传。

　　　　from表单上传文件是有缺陷的：

　　　　　　1、from 表单提交不支持headers上传参数，无法在headers 上加tooken字段。

　　　　　　2、form 表单提交，一般的服务器处理方式是重定向。无法像ajax回调那样，拿到返回值。

　　　　　　　　a、如果服务器返回的是json，并不能拿到服务器返回的数据，而是直接提示下载或打开。

　　　　　　  

　　　　　　　　　   之所以ie9下提示打开或者保持，是因为：
　　　　　　　　　　　   ie无法解析回调里的json数据，就是说如果服务器返回json数据，ie会把它当做文件来处理，显示打开或保存。 

　　　　　　　　b、ie9可以解析的是 text/html 或者 text/plain 类型的数据，所以后端返回的时候自定义contype-type为"text/html"或者"text/plain"。

三、第三方插件 解决 兼容性问题

• html5shiv：IE支持 html5标签。【待验证】https://jingyan.baidu.com/article/db55b609a96a114ba30a2f2c.html
• CSS3选择器插件（多个文件）：插件入口  http://selectivizr.com/
• e-css3.htc：可以解决ie6/7/8的  边框圆角  属性的兼容。【待验证】
• browser.min.js：使IE支持es6的一些语法。默认情况下babel 只转换新的 JavaScript 语法，而不转换新的 API ，比如 Set、Maps、Proxy、Reflect、Symbol、Promise、Iterator、Generator、 等全局对象。
• browser-polyfill：解决 browser.js 没有解决的一部分功能。https://blog.csdn.net/weixin_42273718/article/details/100897195

四、第三方库对 IE 的支持情况

• jQuery2.0版本以上的不在支持ie6、7、8；

五、总结 PC 端页面，在 兼容性问题上的开发流程

　　1、基于 现代浏览器（如Chrome）先开发好页面。

　　2、创建一个单独解决 IE9以下 兼容性问题的 css文件，通过 IE条件注释法，引入这个css文件。【这里解决不了 IE11 的css问题】

    <!--[if lt IE 9]>
        <link rel="stylesheet" href="./css/lte-ie9.css">
    <![endif]-->

　　3、通过媒体查询法，解决 IE10/IE11 的兼容性问题。这两个版本对 CSS3 已经有很大部分支持了。

　　4、创建一个单独解决 IE10以下 兼容性问题的 JS文件，把不支持 es5的 API，在这个文件 手动创建声明。使得程序可以调用 这些 es5 的方法。

　　5、如果有现成第三方 封装好的，解决兼容性的 CSS 或 JS直接引入就可以了。要注意 使用IE条件注释法引入 或 其他 只在 IE 引入的方法。