兼容ie浏览器代码处理

小灰灰 2022-12-29 06:42 180阅读 0赞

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

### **一、使用Mate标签** ###

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

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

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

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

或者

或者

以上三种写法是将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][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浏览。

[vue_console]: https://blog.csdn.net/sinat_36728518/article/details/109628328