项目背景:
首先,根据官网示例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中已被修复
- bug触发条件:由于父级设置了overflow-x:auto, 子元素长度超出, 而且设置有:hover, 这时hover或拖动滚动条是就会出现这种情况
- 解决办法: 使用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中点击是没有反应的
解决办法:
- 引入jQuery和jQuery.from
- 使用vue-upload-component
注意事项:
在ie9中, 接口返回的content-type为json时, ie9会保存或打开, 导致不走接口回调, 需要与后台沟通将content-type设置text/html形式