防止Edge中的高对比度模式将背景添加到文本中

Question

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>

And let's say I assigned background-color: cyan; and color: black; to the .SelectedText 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.

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

Answer 1

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