兼容ie浏览器总结

一、搭建vue项目在ie浏览器运行不出来

安装babel-polyfill
npm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill --save-dev

然后在入口main.js文件引入：import ‘babel-polyfill’，

我是用了官方脚手架vue-cli，还要修改配置文件，网上一般说的是修改webpack.config.js

在module.exports里添加：

 entry:{
    app:["babel-polyfill","../src/main.js"],
  },

解决IE不显示内容代码
在需要兼容的地方添加：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

二、IE9浏览器下的 placeholder不显示的解决方案

判断浏览器是否支持input placeholder属性

 
tool.hasSupportedPlaceholder = function () {
    return 'placeholder' in document.createElement('input');
}

this.sp = tool.hasSupportedPlaceholder();

       <el-form-item
            class="selectAll"
            prop="country"
            :label="sp ? undefined : registerForm.country ?'':$t('doctor.selectCountry')"
          >
            <el-select
              :placeholder="$t('doctor.selectCountry')"
              v-model="registerForm.country"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in countrylist"
                :key="'numlist' + index"
                :label="item.name + ' / ' + item.nameEng"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

 

三、解决ie9不兼容flex布局问题

以下浏览器支持flex布局方式
IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+
以下浏览器支持标准的flex布局方式（不需要加私有属性前缀）
Edge、Firefox 28+、Chrome 29+、Safari 9+

想要支持ie低版本
同时使用，外布局flex，内布局float
display: flex;
float: left;

div{
 
display: flex;
 
    div{
 
      float: left;
 
    }
 
}
    

四、Ie浏览器出现数据更新了，但是接口请求数据不刷新的情况

当使用Ie浏览器的时候，可能会出现数据更新了，但是接口请求数据不刷新的情况，加上下面这段代码即可

// 添加请求拦截器
service.interceptors.request.use(config => {
  // console.log(config);
   //当使用Ie浏览器的时候，可能会出现数据更新了，但是接口请求数据不刷新的情况
   if (config.method === 'get' || config.method === 'GET') {
    config.params = {
      _t: Date.parse(new Date()) / 1000,
      ...config.params
    }
  }
  return config;
}, error => {
  return Promise.reject(error);
})

 

五、NavMenu 在折叠之后,鼠标滑过menu,在其他浏览器没有错误,但是在IE下,报错.Error in v-on handler: “TypeError: 对象不支持此操作“

修改element源码
目录 node_modules\element-ui\lib\element-ui.common.js
直接在第一行添加如下代码

(function(window) {
    try {
        new MouseEvent('test');
        return false; // No need to polyfill
    } catch (e) {
        // Need to polyfill - fall through
    }
    // Polyfills DOM4 MouseEvent
    var MouseEvent = function(eventType, params) {
        params = params || { bubbles: false, cancelable: false };
        var mouseEvent = document.createEvent('MouseEvent');
        mouseEvent.initMouseEvent(
          eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
        );
        return mouseEvent;
    };

    MouseEvent.prototype = Event.prototype;

    window.MouseEvent = MouseEvent;
}(window));

六、浏览器兼容问题（浏览器私有化前缀）

渐变色代码：background:linear-gradient(left,red,blue)
运行发现所有浏览器都不兼容（需要添加前缀）

谷歌内核：background: -webkit-linear-gradient(left,red,blue);
IE内核：background: -ms-linear-gradient(left,red,blue);
火狐内核：background: -moz-linear-gradient(left,red,blue);
欧鹏：background: -o-linear-gradient(left,red,blue);