IE11的硬伤！ElementUI的日期选择器遇到兼容性问题，怎么破？

前端

2023-07-07 20:18:01

解决 IE11 中 ElementUI 日期选择器组件的边框线消失问题

在使用 ElementUI 时，您可能会遇到一个奇怪的问题：在 IE11 浏览器中，日期选择器组件的边框线消失不见了。这会让您的界面看起来不完整且不专业。别担心，这个问题很容易解决，我们只需一点 CSS 即可。

问题分析

这个问题是由 IE11 对 CSS 属性的兼容性问题引起的。当页面放大 150% 时，日期选择器组件的上方和下方边框线会消失。

解决方案

要解决此问题，我们可以使用 CSS hack 强制 IE11 正确渲染边框线。以下是如何操作：

打开您的 CSS 文件。
添加以下 CSS 代码：

/* 针对 IE11 的 CSS hack */
.el-date-picker__header,
.el-date-picker__body-wrapper {
  border: 1px solid #dcdfe6 !important;
}

保存您的 CSS 文件，刷新浏览器，问题就解决了！

代码示例

<template>
  <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dateRange = ref([]);
    const pickerOptions = {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit('pick', [start, end]);
        }
      }]
    };

    return {
      dateRange,
      pickerOptions
    };
  }
};
</script>

<style>
/* 针对 IE11 的 CSS hack */
.el-date-picker__header,
.el-date-picker__body-wrapper {
  border: 1px solid #dcdfe6 !important;
}
</style>