防止Edge中的高对比度模式将背景添加到文本中 [英] Preventing high-contrast mode in Edge from adding background to text

问题描述

我正在调整一些组件，以使它们都能正常工作并在高对比度模式下看起来不错. Edge似乎在IE11未添加的所有文本下添加了黑色背景.我似乎找不到在CSS中定位这种背景的方法，或其他任何方法来规范这两种浏览器之间的行为.

I'm working to adjust some components so that they all function and look good in high-contrast mode. Edge seems to be adding a black background under all text that IE11 does not add. I can't seem to find a way to target this background in CSS, or any other way to normalize the behavior between the two browsers.

例如，假设我有以下内容:

For example, let's say I have the following:

<div class="SelectedText">
  Text!
</div>

假设我将background-color: cyan;和color: black;分配给.SelectedText div.

And let's say I assigned background-color: cyan; and color: black; to the .SelectedText div.

在这种情况下，IE11使用具有指定颜色的div和文本按预期方式呈现它.但是，在Edge中，为div背景和文本指定了正确的颜色，但是文本本身在其后面绘制了黑色背景，因此黑色文本上的黑色不可读.

In this scenario, IE11 renders it as expected with the div and text having the assigned colors. However, in Edge the div background and text are given the right colors, but the text itself gets a black background drawn behind it, making it unreadable black on black text.

下图说明了在菜单项的上下文中具有与上述基本相同的标记出现的此问题.

The following image illustrates this problem occurring in the context of menu items with with basically the same markup described above.

是否有任何方法可以禁用或定位Edge添加的额外背景?

Is there any way to disable or target this extra background that Edge adds?

推荐答案

最终找到了答案.在父级上设置-ms-high-contrast-adjust: none;可以禁用Edge放置在文本后面的背景.

Found the answer to this eventually. Setting -ms-high-contrast-adjust: none; on the parent can disable the backgrounds that Edge puts behind text.

这篇关于防止Edge中的高对比度模式将背景添加到文本中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！