IE浏览器兼容性设置
1 首篇
亲爱的猿，是不是还在被IE浏览器弄得焦头烂额？本博文将罗列几种方式，完美解决IE兼容性难题，希望能帮到给位同仁。
首先声明，本博文属于原创，如需转载，请标明链接，坚决谢绝剽窃。如有发现，本人将投诉，写作不易，谢谢支持！
2 HTML meta标签设置页面渲染方式
2.1 html meta标签信息详细介绍，链接大神url地址
https://www.cnblogs.com/En-summerGarden/p/7771813.html
2.2 meta标签设置，选择浏览器内核渲染方式
<head>
<meta charset="utf-8">
<!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 兼容ie指定版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> //兼容ie9
<!-- 360浏览器极速模式和标准模式 -->
<meta name=”renderer” content=”ie-comp”>
<!-- 默认IE标准模式 -->
<meta name=”renderer” content=”ie-stand”>
<!-- 选择浏览器内核进行页面解析和渲染 -->
<meta name="renderer" content="webkit|ie-stand|ie-comp" />
</head>meta标签解决兼容问题，核心方式是选择浏览器的内核来渲染html页面，不同内核的浏览器对页面的渲染也是不尽相同，如果对浏览器运行机制和渲染机制感兴趣的猿们，可以参考下面链接
https://kb.cnblogs.com/page/129756/
https://segmentfault.com/a/1190000009975744
不同的浏览器页面渲染引擎，参考*
https://en.wikipedia.org/wiki/Comparison_of_browser_engines
3 JS 方式处理浏览器兼容（本博文重点介绍）
3.1 不同浏览器的JS解析引擎
我们最常用的Chrome浏览器，V8引擎解析js，不同浏览器解析引擎不尽相同，所以会有所差异，有关浏览器JS解析引擎，参考*
https://en.wikipedia.org/wiki/JavaScript_engine
3.2 通过 polyfill.js解决兼容性问题（本博文重点介绍）
polyfill.js一定在项目初始化时候引入，优先级最高
3.2.1 polyfill概念参考链接
通俗介绍就是，如果浏览器js引擎没有一些模块或者方法，那么可以通过polyfill.js（代码块或者插件），将缺少的模块或者方法添加进去
https://remysharp.com/2010/10/08/what-is-a-polyfill
https://javascript.info/polyfills
3.2.2 通过代码实例说明解决方式（IE和Chrome）
引入polyfill.min.js
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>OR ES6
//浏览器兼容性设置
import './src/ol/plugins/polyfill/polyfill.min.js?features=requestAnimationFrame,Element.prototype, CharacterData.prototype, DocumentType.prototype,URL,Object.assign';polyfill.min.js代码
/* Disable minification (remove `.min` from URL path) for more info */
(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});features后面的参数代表浏览器缺少的模块或者方法，将其绑定在window对象之下
（1）requestAnimationFrame
（2）Element.prototype
（3）CharacterData.prototype
（4）DocumentType.prototype
（5）URL
（6）Object.assign
IE浏览器缺少remove()方法，解决实例
/* Disable minification (remove `.min` from URL path) for more info */
(function(arr) {
const elementNodes = [Element.prototype, CharacterData.prototype, DocumentType.prototype];
/* if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
} */
elementNodes.forEach(function(item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
this.parentNode.removeChild(this);
}
});
});
}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});参考链接
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
IE浏览器缺少NodeList.prototype.forEach()方法，解决实例
/* Disable minification (remove `.min` from URL path) for more info */
(function(arr) {
// const elementNodes = [Element.prototype, CharacterData.prototype, DocumentType.prototype];
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});IE浏览器缺少Object.assign()方法，解决实例
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Object.assign"></script>正如polyfill的概念，如果浏览器缺少模块或者方法，我们便可以为其添加，使得浏览器能流畅地运行
4.结束语
关于浏览器的兼容性,本博文主要通过html meta标签设置和polyfill.js方式分享大家，还有其他方式解决，希望同仁们可以在评论区留言，我会及时补充，希望能帮到大家，非常感谢你们的支持。最后附上本博文的主要信息参考Web MDN链接
https://developer.mozilla.org/en-US/docs/Web/API