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/