在项目开发过程中，有没有遇到需要兼容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')创建日期即可。
网友评论