【IE11兼容】ElementUI之日期选择器组件(DatePicker-range)的问题和处理

前情提要

测试在进行浏览器放大150%时页面UI是否正常的测试中发现日期选择器组件（时间范围选择）的两个时间选择区的上方和下方的边框线没了。

• 先看下没有问题的边框应该是什么样子的：

• 

• 再看下ie浏览器突然放大到150%后的样子

• 

• 很明显开始日期，和结束日期的上边框线比其他地方细很多。

问题排查

• 首先我将选择区的属性设置为display：none，发现边框线又出来了。说明是选择区的高度大于外边框的高度，导致边框线被覆盖。如下图：

• 

• 

• 之后发现.el-date-editor .el-range-input, .el-date-editor .el-range-separator 的样式中height为26px，如下图：

• 

• 通过上面的分析应该是1px的老问题导致的。

解决方案

将.el-date-editor .el-range-input, .el-date-editor .el-range-separator的样式中的height在vue组件中通过/deep/进行穿透，然后修改成25px，再使用!important将其优先级修改成最高优先级，以免修改失败。代码如下图： 至此，该问题就被彻底解决了。