vue兼容ie9及其以上

项目背景:

首先，根据官网示例vue是不支持IE8及以下版本, 所以此次项目也就只需要兼容ie9, 在这期间花费了一些时间处理这个问题, 这里在这里记录一下都有哪些问题

• vue - 2.5.2
• element-ui - 2.9.1
• http请求 - axios( 0.19.0 )

1. 安装babel-polyfill( 解决ie项目打不开问题 )

npm install babel-polyfill --save-dev

在项目入口文件main.js中引入babel-polyfill

import 'babel-polyfill'

修改webpack配置文件

module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
  ...
}

2. 安装promise( 解决axios对promise的兼容)

npm install es6-promise --save

在项目入口文件main.js中引入promise

import promise from 'es6-promise';
promise.polyfill();

3. 每个接口最好添加一个时间戳或者随机数做为参数

在ie中对表格进行操作的时候, 由于缓存的问题, 不会重新去请求数据, 表格数据变化没有体现出来

4. css3兼容问题

尽量不要使用css3, 虽然ie9支持部分css3, 但还是有限, 比如一些伪类, flex布局, css3动画

IE9对CSS3属性的支持情况转自: https://blog.csdn.net/lml_little/article/details/51074779

5. el-table表格横向滚动条导致hover的时候高度拉伸

在出现横向滚动条的时候, 在ie9中会出现高度忽增忽减的情况, 这个bug在ie10中已被修复

1. bug触发条件:由于父级设置了overflow-x:auto, 子元素长度超出, 而且设置有:hover, 这时hover或拖动滚动条是就会出现这种情况
2. 解决办法: 使用el-table 只需要在 el-table__body-wrappe上加height:100%

   .el-table__body-wrapper{
   	height: 100%;
   }

   非el-table可以在table(设置有overflow属性)外面套一层div, 给该div设置height:100%

.el-table__body, .el-table__footer, .el-table__header {
    border-collapse: separate !important;
}

6. element-ui中动画样式的支持

在ie9中动画效果都不一样, 因为使用了css3中的transition和transform, 在两个属性前面加上-ms-前缀就可以解决

7. ie9不兼容el-upload

使用了el-upload, 在ie9中点击是没有反应的

解决办法:

1. 引入jQuery和jQuery.from
2. 使用vue-upload-component

注意事项:

在ie9中, 接口返回的content-type为json时, ie9会保存或打开, 导致不走接口回调, 需要与后台沟通将content-type设置text/html形式