0

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

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

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

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

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

下划线为整个选项卡加下划线

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

下划线大部分是不可见的

4

2 回答 2

0

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

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

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

于 2019-04-30T19:40:34.027 回答
0

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

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

您的代码包含 a height: "3px"，因此请根据自己的喜好编辑我使用的值。大纲不会推动页面上的其他元素，因为它不包含在 DOM 中。transparent在 Edge、IE 和 Firefox 的 Windows 10 高对比度模式下，颜色变得可见。Chrome 不会显示它。该outlineOffset属性将使轮廓看起来接近实线下划线。再次编辑该值，直到它具有您正在寻找的外观。

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

于 2019-11-29T14:24:33.177 回答