css - IE和Edge的高对比度强调问题

我在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",
            }

使用上面的代码，我可以在高对比度模式下显示下划线，但是对于我们指定的行的整个宽度大小，该下划线是不可见的。我可以对宽度进行硬编码以使其整体可见，但这可能不是正确的方法，因为它将影响宽度较小或较大的其他标签。
我的问题是：是否有任何方法可以使border-right宽度等于其各自的样式宽度，或者有其他替代方法可以解决此问题？

没有高对比度模式时的外观如下：



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

最佳答案

在高对比度模式下，可以使用特殊的媒体查询来指定其他颜色：

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

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

关于css - IE和Edge的高对比度强调问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55927643/