IE浏览器可谓是前端的头号大敌,但是为了用户的体验,前端开发人员还是不得不去面对这个敌人,本人总结了几点,仅供大家参考:
一、使用Mate标签将border-radius放在某个文件中的某个元素上时,它没有使用border-radius正确呈现,并且在Internet Explorer 11中的border-radius属性下面有一条红色的卷曲线?
当我尝试在我自己的自定义HTML文件中执行相同操作时:
仅当仿真模式设置为IE8或更低时,IE Inspector中的卷曲线才会出现 – 从而表示此属性在当前模式下不会被超出.
但是,如果在Edge模式下使用IE11,则可能会有一些强制兼容模式的元属性
或者
或者
以上三种写法是将meta出现在html的head头部中,如果在ie浏览器中,会让ie浏览器启用最高内核解析html代码
二、清除consoleie浏览器下某些事件无效,但是开了控制台事件就有效了。这是由于某些版本的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浏览。