-- 创造无限可能

ie兼容问题: ie兼容vue+element

2022-11-03 12:03:32
636 人浏览 7 人点赞
有用,点赞支持一下

版本兼容性问题

vue 只兼容ie8以上版本;

ie8及以下版本不支持Object.defineProperty方法,但这个是vue实现响应式的所必须的,所以从Vue的源码来看根本就无法支持IE8
2、IE 不兼容 axios的promiss对象;

在项目中使用了ES6 promise对象

安装:npm install es6-promise;
3、IE 不兼容es6语法;

IE不支持ES6语法

安装:npm install —save babel-polyfill;

配置:module.exports = { entry: [“babel-polyfill”, “./src/main.js”] };

main.js中配置:import ‘babel-polyfill’ //放在最顶部,确保全面加载。

http网络请求(跨域)

http 组件使用 axios,xios 对 ie9 版本以下跨域由前端项目打包的解决方案 webpack 代理webpack 的 devServer.proxy的功能实现。

devServer: {

    public: "",

    // 代理



    proxy: {

        "/api": {

            target: process.env.VUE_APP_USE_IP,

            changeOrigin: true,

        },

    },

},

IE浏览器下功能无效

1、dom.click()方法无点击事件进行下载ie认为是漏洞,判断下是不是IE浏览器,然后特殊处理:

let blob = 'xxx' // blob对象

if (!!window.ActiveXObject || 'ActiveXObject' in window) {

    window.navigator.msSaveBlob(blob, imgText + '.png')

} else {

    let a = document.createElement('a')

    a.setAttribute('href', URL.createObjectURL(blob))

    a.clock()

}

:IE11 中app.js报语法错误或者缺少‘:’ ‘等

     是因为文件里面还有ES6语法,需要转换,修改build/webpack.base.conf.js文件

   {

test:/.js$/,

    loader:"babel-loader",

    include:[

//把这个⽂件添加进去让他进⾏babel编译

resolve(

“node_modules/_vue-particles@1.0.9@vue-particles/src/vue-particles”

),

resolve(“src”),

resolve(“test”),

}

ie11打不开vue项⽬,报错 “对象不⽀持“addEventListener”属性或⽅法

在head标签中加⼊< meta http-equiv=“X-UA-Compatible” content=“IE=EDGE”/>这个属性主要是设置浏览器优先使⽤什么模式来渲染页⾯的。代码IE=edge告诉IE使⽤最新的引擎渲染⽹页,这个在需要兼容IE浏览器的情况下都可以加上这句话。

4、:IE 11 flex:1;样式会出错,跟实际想要的效果不同:

因为IE11 flex:1;会识别为flex:1 1 0;⽽其他浏览器是flex:1 1 auto;

所以改为width:100%;flex:1 1 auto; 或width:100%;flex-grow:1
4、elementui框架在ie9浏览器下的兼容性问题

1、el-select组件内在IE9中会出现下图样式错乱,解决办法:

// select框固定下拉箭头兼容ie9

.el-select .el-input .el-input__suffix .el-icon-arrow-up{

-ms-transform: rotate(180deg)\0;

}

2、IE9中elementui的message提示框会出现样式错乱,解决方法:

// 兼容ie9,使提示框显示正常, \0是让这条代码只在IE9中生效;

.el-message .el-message__content{

display: inline-block\0;

}

3、IE9中el-cascader组件下拉没有水平对齐,解决方法:

// ie9 el-cascader兼容性问题

.el-cascader-menulist .el-cascader-node .el-cascader-nodepostfix,

.el-cascader-menulist .is-active .el-cascader-nodeprefix{

top: 10px\0;

}

4、IE9日期组件样式问题解决方法:

/ 解决IE9 日期组件样式问题 /

.demonstration, .el-date-editor—datetimerange {

display: inline-block !important;

vertical-align: middle;

line-height: 24px;

}

5、IE9的弹性布局flex都会失效,凡是在IE9中使用flex的都需要改成float浮动布局或者使用display: inline-block;属性来纠正。

6、如果要想使某一行代码在IE9中生效那么只需在代码后面添加 \0 ,例如: float: left\0;
————————————————
版权声明:本文为CSDN博主「赵晓霞」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42459543/article/details/124987901