css - IE 和 Edge 的高对比度下划线问题

Question

我在使用 IE 和 Edge 浏览器时遇到了问题。我有一个选项卡列表，当选择一个选项卡时，我会在所选选项卡上添加下划线以使其在选中时可见。当您打开高对比度模式时，它仍会显示，但颜色与预期不同。此行为在 Chrome 中运行良好，但在 IE 和 Edge 的情况下，打开高对比度模式时没有下划线。

我尝试了一些修复并进行了一些研究，发现在下划线样式中添加 border-right 和 border-left 可以使其可见。但我需要提供左右边框宽度大小才能显示，否则它会显示默认宽度。

tabLineStyle: {
                height: "3px",
                width: "auto",
                backgroundColor: "blue",
                borderRight: "solid blue",
                borderLeft: "solid blue",
                borderRadius: "2px",
                opacity: 1,
                transition: "opacity 200ms;",
                marginTop: "3px",
            }

使用上面的代码，我能够在高对比度模式下显示下划线，但它在我们指定的线条的整个宽度尺寸中是不可见的。我可以对宽度进行硬编码以使其完全可见，但这可能不是正确的方法，因为它会影响其他宽度更小或更大的选项卡。我的问题是:是否有任何方法可以使右边框宽度等于其各自的样式宽度，或者是否有任何其他替代方法来解决此问题？

这是没有高对比度模式的样子:

这就是我在添加没有特定宽度的左右边框样式后粘贴在问题中的代码在高对比度模式下的样子:

Answer 1

在高对比度模式下，您可以使用特殊的媒体查询来指定不同的颜色:

@media screen and (-ms-high-contrast: active) {
    /* your new styling */
}

参见:https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast/