前端开发中在IE11下出现的一些兼容性问题(持续汇总)

javascript/jquery

浏览数:167

2020-6-16

1、Chrome上可以正常打开网页,但是在IE11上打开一片空白,打开控制台报语法错误,如下图:
点击chunk-vendors.js后发现是vue-baidu-map组件报错,如下图:
原因:
vue-baidu-map组件可能不兼容IE11。
解决办法:
在vue.config.js增加如下配置即可:

module.exports = {
  transpileDependencies: ['vue-baidu-map']
}

vue-cli官网中对transpileDependencies的介绍:

transpileDependencies

  • Type:Array<string | RegExp>
  • Default:[]

    默认情况下babel-loader会忽略所有node_modules中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

参考资料:https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

2、IE11下在登录页面,当el-button组件设置native-type=”submit”后,点击登录后页面刷新又回到了登录页面。
原因:使用submit会默认刷新页面。
解决办法:事件后加.prevent阻止表单默认刷新。

<el-button type="primary" native-type="submit" :loading="loginStatus" @click.prevent="login" @keyup.enter="login" style="width: 100%;">登录</el-button>

3、css中使用flex:1在IE11下出现高度不能自动充满多余空间。如下图:
原因:

  1. flex:1在IE10-11中会默认解析成:flex: 1 1 0
  2. flex:1在Chrome和Firefox中会解析成:flex: 1 1 auto

所以由于在IE浏览器中有兼容性问题,所以会导致样式出现差异。
解决办法:
使用flex-grow: 1替换flex:1可以解决此样式问题。

4、使用dayjs在IE11下转换这种格式2020-03-17T17:24:26.000+0800时间时,转化结果为invalid time
原因:
dayjs部分功能兼容性问题。
解决办法:
使用moment.js。

5、vue项目在ie11下一片空白并报错promise undefined。
原因:
ie11浏览器解析不了es6的语法,需要我们使用babel。但是Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。
解决办法:
1.在vue项目中安装babel-polyfill。

npm install --save-dev babel-polyfill

2.在mian.js中引入babel-polyfill(要在引入vue,vuex,elementui 之前引入)。

import 'babel-polyfill'

3.重启项目即可正常。

6、IE11中get请求方式在初次请求之后不再进行请求了,而是会从缓存中获取数据,但是chrome浏览器会中却每次都会获取。
原因:
IE浏览器会有缓存。
解决办法:
使用请求拦截器,为每个请求加一个时间戳。

// 请求拦截器 --- 仅axios
service.interceptors.request.use((config) => {
  config.params = {
    _t: Date.parse(new Date()) / 1000,
    ...config.params
  }
  return config
}, (error) => {
  // 错误抛到业务代码
  error.data = {}
  error.data.msg = '服务器异常,请联系管理员!'
  return Promise.resolve(error)
})

持续更新中……

作者:running