ie浏览器兼容性

盒模型差异

IE盒模型： border-box：指定盒模型为 IE模型（怪异模式），设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。
W3C盒模型： content,padding,border、margin

某些CSS属性需要在不同浏览器中添加前缀才能生效

例如-webkit-、-moz-、-o-、-ms-等。需要使用CSS预处理器或其他工具来自动生成浏览器前缀。

判断是否ie

function IEVersion() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if(isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if(fIEVersion == 7) {
              return 7;
          } else if(fIEVersion == 8) {
              return 8;
          } else if(fIEVersion == 9) {
              return 9;
          } else if(fIEVersion == 10) {
              return 10;
          } else {
              return 6;//IE版本<=7
          }   
      } else if(isEdge) {
          return 'edge';//edge
      } else if(isIE11) {
          return 11; //IE11  
      }else{
          return -1;//不是ie浏览器
      }
  }

IE6双边距

行内属性设置了块级属性（display: block;）后，会产生双倍边距。解决方案是在添加一个 display: inline; 或者 display: table;

双倍margin 浮动元素设置了margin在IE6下会产生双倍margin。

用@babel/polyfill使低版本浏览器也支持所有ES6的语法

npm install --save core-js@3

在低版本浏览器还是没有比如Promise、数组的map等。所以不仅要使用@babel/preset-env进行ES6转ES5，还要借助 @babel/polyfill把缺失的变量或者函数补充到低版本的浏览器里。

这将模拟一个完整的ES2015+环境（即ES6） (没有< Stage 4提案)，并将用于应用程序而不是库/工具。(使用babel-node时自动加载此polyfill)。
这意味着您可以使用新的内置函数，如Promise或WeakMap，静态方法如Array.from或 Object.assign，实例方法比如Array.prototype等。为了做到这一点，polyfill添加了全局范围和原生原型，比如String。
使用polyfill后，打包后的这个入口文件大小相比不使用时要大的多一些了（因为相当于配置了一个完整的ES6环境）。
如果只想补充代码中使用到的ES6语法，而不是把所有的一股脑全补充，那么建议对preset使用useBuiltIns: "usage"（如上方代码里）

不应该使用：-D npm install @babel/polyfill -D

polyfill(它将在您的源代码之前运行)，所以我们需要它是一个依赖项，而不是devDependency,直接使用依赖项:

npm install --save @babel/polyfill

indexof()

IE8以下不兼容indexof()方法, 添加indexof的原型方法即可；

视口设置

该设置用于移动设备浏览器，指定视口的宽度等于设备宽度，初始缩放比例为1，最大缩放比例也为1，不允许用户缩放页面。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

盒模型差异​

某些CSS属性需要在不同浏览器中添加前缀才能生效​

判断是否ie​

IE6双边距​

用@babel/polyfill使低版本浏览器也支持所有ES6的语法​

indexof()​

视口设置​