兼容ie浏览器代码处理

IE浏览器可谓是前端的头号大敌，但是为了用户的体验，前端开发人员还是不得不去面对这个敌人，本人总结了几点，仅供大家参考：

一、使用Mate标签

将border-radius放在某个文件中的某个元素上时,它没有使用border-radius正确呈现,并且在Internet Explorer 11中的border-radius属性下面有一条红色的卷曲线？

当我尝试在我自己的自定义HTML文件中执行相同操作时：

<div style="width: 100px; height: 100px; background-color: red; border-radius: 5px;"></div>

仅当仿真模式设置为IE8或更低时,IE Inspector中的卷曲线才会出现 – 从而表示此属性在当前模式下不会被超出.

但是,如果在Edge模式下使用IE11,则可能会有一些强制兼容模式的元属性

<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8,IE=EDGE" />

或者

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

或者

<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8" />

以上三种写法是将meta出现在html的head头部中，如果在ie浏览器中，会让ie浏览器启用最高内核解析html代码

二、清除console

ie浏览器下某些事件无效，但是开了控制台事件就有效了。这是由于某些版本的IE(IE8~11)由于脚本保护机制不开控制台是没console对象的，当不支持这个对象时，就会抛出异常停住，这时我们会打开控制台看错误信息，但是打开刷新后页面就会正常更新了。

本办法就是查看代码里是否用到console对象。如果有删除就像了的console调试完之后一定要记得删除。

在vue项目中，如果使用vue-cli3.0以上脚手架：

安装：npm install --save babel-polyfill；

main.js中配置：import 'babel-polyfill' //放在最顶部，确保全面加载。

最重要是在打包上线的时候，配置babel-plugin-transform-remove-console插件，全面清除console调试，避免有漏网之鱼。

在vue项目中配置babel-plugin-transform-remove-console插件，参见vue项目中清除console

三、ie浏览器不刷新数据，因为页面有缓存

　　IE浏览器会缓存网页中的GET和XHR的内容，请求方式是get方式时，IE浏览器会进行识别。如果该get请求的url是第一次请求的话，会请求服务器，从数据库中获取数据；如果该get请求的url不是第一次请求的话，那么该url就不会请求服务器，IE浏览器会直接从缓存中拿到上次该url获取的数据。无论是什么插件的get方式请求，IE浏览器都会这样进行处理的，从而导致数据不同步。

  //console.log(config);if (config.method == 'post') {config.data = {...config.data,_t: Date.parse(new Date()) / 1000};} else if (config.method == 'get') {config.params = {_t: Date.parse(new Date()) / 1000,...config.params};}config.headers['Cache-Control'] = 'no-cache';

在axios请求上加时间戳，骗过ie浏览。