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形式

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值