vue兼容ie9及其以上

2024-07-01 07:15| 来源: 网络整理| 查看: 265

项目背景:

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

vue - 2.5.2element-ui - 2.9.1http请求 - 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形式

【本文地址】

公司简介

联系我们