前端vue项目在IE11上的兼容问题总结

最新推荐文章于 2024-08-06 14:05:31 发布

真点程序员

最新推荐文章于 2024-08-06 14:05:31 发布

阅读量2k

点赞数

分类专栏： # 遇见BUG 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/chengcheng111111111/article/details/114679053

版权

遇见BUG 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1. sockjs报错

找到/node_modules/sockjs-client/dist/sockjs.js
找到代码的 1606行，注释掉即可

2. 报语法错误，打开空白屏

安装 babel-polyfill

npm install babel-polyfill --save
在main.js中引入babel-polyfill
```
import 'babel-polyfill'
```
重启项目

3. 兼容IE11的下载功能

     downloadTask(params).then(res => {
       // 判断IE11下用window.navigator.msSaveBlob方式
       if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(res, `${row.jobName}.json`);
          } catch (e) {
            console.error(e);
          }
        } else {
         // 其他浏览器下用这种方式
          const fileName = `${row.jobName}.json`;
          const _res = res.data;
          const blob = new Blob([_res]);
          const downloadElement = document.createElement('a');
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = decodeURI(fileName); // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        }
      });

4. 兼容IE11的样式写法

IE11不能够识别样式中的计算属性calc，因此需要针对IE11额外设置样式。

@media screen and(-ms-high-contrast:active), (-ms-high-contrast: none){

// 在这里面写IE的样式，只有IE能识别到

}

  .demo-scrollbar-wrap {
    max-height: ~'calc(100% - 19px)';
    @media screen and(-ms-high-contrast:active), (-ms-high-contrast: none) {
      max-height: 100%;
    }
  }