IE浏览器兼容性(原创）

1、背景

　　由于甲方爸爸的电脑特别low，派任务下来就得兼容E11，具体什么原因咱就不说(社畜心酸，都是泪),后续如果有IE兼容性还会继续更新，目前此文章针对到IE11和IE10

2、项目版本

　　此项目为vuecli3创建项目，vue版本为2.6.10，element-ui为2.15.7

3、具体需要修改的文件

3.1 vue.config.js

　　默认情况下 babel-loader 会忽略所有 node_modules 中的文件。所以需要使用Babel 显式转译依赖，因此使用到了transpileDependencies，将部分不兼容IE11的依赖进行配置

module.exports = {
    //  选项...
    transpileDependencies: ['jsencrypt','js-md5']
    // 选项...
}

　　此处我只是举例了jsencrypt(ie11),js-md5(ie10)组件，其他的需要配置的在transpileDependencies的值内新增即可,很多富文本编辑器是不兼容ie10的，例如quill。如果需要自行查找

注意: 笔者本人项目使用element-ui为2.15.7 不需要进行配置，其他版本是否需要配置，自行验证

3.2 router

//  路由-由import导入修改为require导入 
// component: () => import('@/views/login') 
// 修改为
//  component: (resolve) => require([`@/views/login`], resolve)
// 举例如下
const routes = [
 {
    name: 'Login',
    path: '/login',
    component: (resolve) => require([`@/views/login`], resolve),
    hidden: true
  }
]

const router = new Router({
  mode: 'hash',
  routes
})

3、细节点

3.1 正则表达式相关

当你的依赖组件里面含有如下，需要修改相关正则，避免使用，如果有此会导致项目首页就白板，如有其他可以补充

• ?<=

3.2 CSS

目前我根据我现有项目代码发现的一些问题如下，如有其他可以补充

• position 需要把left/right、top/bottom 默认值0写上 不要省略
• img标签的max-height: 100%和max-heightt: 100%会失效 直接width: 100%;height: 100%;
• flex布局的一些属性例如flex-wrap会失效,根据你UI自行使用其他方式进行 修改换行
• 影响挺多的 input的placeholder的颜色 如果你对原始的input的输入文本颜色进行覆盖更改了，那么一定要针对ie浏览器覆盖更改placeholder的颜色，否则placeholder的颜色会和文本颜色一致，修改如下

   &:-ms-input-placeholder {
      color: #DDDDDD !important;
    }

---

-moz-代表firefox浏览器私有属性 -ms-代表ie浏览器私有属性 -webkit-代表safari chrome私有属性 -o-代表Opera

• 其他不兼容ie浏览器的样式的自行查看兼容性网站: CSS属性兼容性网站

如有问题 留评与我沟通哦