IE浏览器兼容性问题总结

在项目开发过程中，有没有遇到需要兼容IE浏览器的头疼需求，虽然IE浏览器已被淘汰出主流浏览器，但部分公司或业务会需要，很不幸的是，这次项目开发涉及IE浏览器的兼容性。如果你们也有遇到同样的问题，希望我的笔记可以帮助你们少走一些坑。

项目是基于Vue2 + iview UI +ES6等搭建，所以下面的兼容性问题大多是iview组件库未适配的问题。
IE兼容问题不该是某个文件的CSS问题，而是整个项目文件，所以先判断当前浏览器是否为IE，给body元素添加特殊class

this.isIE = navigator.userAgent.indexOf('Trident') > -1 || false;
let Dom = document.querySelector("body");
if (this.isIE) {
  Dom.className +=  ' isIE';
}

注意isIE前面有空格，以防body元素上有class属性

下面是项目过程中遇到的一些IE兼容性问题总结（问题仅限IE浏览器，Chrome中无下列问题）

1、 Modal框弹出位置不居中，显示在浏览器右下角位置

原因： ivu-modal定位问题导致

reason.png

解决方法：在head中添加style标签，使用CSS的transform属性，使得ivu-modal绝对居中

<style lang="scss>
.isIE {
  .ivu-modal-wrap > .ivu-modal {
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      right: auto !important;
      transform: translate(-50%, -50%);
  }
}
</style>

2、Modal弹出框， ivu-modal-body内容为table(数据为异步请求结果)时，表格高度无法撑开

原因：DOM初始渲染时，modal-body无内容，初始高度即为ivu-model-body 的默认高度即32px，是padding:16px撑开的高度;

解决方法：外层添加div，设置高度；或给table设置高度

3、tooltip文字提示偏移位置

原因：ivu-tooltip-popper内联样式是相对浏览器窗口定位，所以会偏移

image.png

解决方法：强制修改ivu-tooltip-popper为绝对定位absolute。

<style lang="scss">
.isIE {
  .ivu-tooltip {
    .ivu-tooltip-popper {
        position: absolute !important;
    }
  }
}
</style>

4、IE模式下，树形控件tree无法撑开外层高度

场景：当设置display:flex且flex-direction:column时，IE浏览器中，子元素无法通过自身内容撑开一个高度，达到最大高度后实现滚动。目前原因还未可知，但可通过下列方式达到想要的效果。

image.png

解决方法：强制修改droptree-dropdown-menu属性display为block；

<style lang="scss">
.isIE {
  .droptree-dropdown-menu{
    display: block !important;
  }
}
</style>

5、IE浏览器下，当设置不可选择日期为20200528至当前时间的昨天，可设置代码如下所示：

optionsDate: {
   disabledDate (date) {
      var yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      var time= new Date('2020-05-28 00:00:00');    // 此处日期格式有误，应使用yyyy/MM/dd mm:hh:ss      
      return date.valueOf() > yesterday || date.valueOf() < time;;
   }
}

会发现小于20200528不可选日期未生效，控制台打印date报Invilid Date错误

解决方法：使用此格式 new Date('yyyy/MM/dd hh:mm:ss')创建日期即可。