1、版本兼容性问题

1. 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' //放在最顶部，确保全面加载。

1. http网络请求(跨域)

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

 devServer: {

        public: "",

        // 代理

 

        proxy: {

            "/api": {

                target: process.env.VUE_APP_USE_IP,

                changeOrigin: true,

            },

        },

    },

1. 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()

    }

1. ：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"),

}

1. 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-menu__list .el-cascader-node .el-cascader-node__postfix,

.el-cascader-menu__list .is-active .el-cascader-node__prefix{

    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;