简体   繁体   中英

Preventing high-contrast mode in Edge from adding background to text

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?

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM