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

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

这是高对比度模式之前的样子

这是在高对比度模式下的样子，我在问题中粘贴了代码，因为我添加了左右边框样式，但未指定特定宽度：

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/

Answer 2

如果您喜欢下划线在Chrome中的外观，并且只需要更改其下划线在Internet Explorer和Edge中的外观，请使用轮廓对其进行样式设置：

outline: "1px solid transparent"
outlineOffset: "-1px"

您的代码包含height: "3px"，因此请编辑我喜欢的值。大纲不会将其他元素推到页面上，因为它不包含在DOM中。在Edge，IE和Firefox的Windows 10高对比度模式下，transparent颜色变为可见。 Chrome不会显示它。 outlineOffset属性将使轮廓显示为接近实线。再次，编辑值，直到它具有所需的外观。

使用transparent颜色而不是您自己的颜色的另一个优点是，显示颜色将根据用户选择的Windows 10高对比度设置而变化。