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

2024-04-29

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

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

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

假设我分配了background-color: cyan; and color: black; to the .SelectedText div.

在这种情况下,IE11 按预期渲染它,并使用具有指定颜色的 div 和文本。然而,在 Edge 中,div 背景和文本被赋予了正确的颜色,但文本本身在其后面绘制了黑色背景,使得黑色文本上的黑色难以阅读。

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

有什么方法可以禁用或定位 Edge 添加的额外背景吗?


最终找到了这个问题的答案。环境-ms-high-contrast-adjust: none;父级上的 可以禁用 Edge 在文本后面放置的背景。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

防止 Edge 中的高对比度模式向文本添加背景 的相关文章

  • 具有一个 css 类的堆叠图标

    在新的 FontAwesome 4 0 0 中 堆叠项目有 css 样式 span class fa stack i class fa fa square o fa stack 2x i i class fa fa twitter fa s
  • 基本 CSS 问题 - 父 DIV 与未知子 DIV、居中父 DIV

    当我将 DIV 居中时 我会给它一个宽度并放置margin auto然而 我对这种情况有两个问题 该父 DIV 内将有 2 或 3 个带有 float left 的 DIV 子 DIVS 的宽度不会改变 但数量可能会改变 2 或 3 因此
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是
  • tr 元素周围的边框不显示?

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag
  • 与 960.gs 的列高度相同吗?

    我有一排 4 列 根据我在每一列中放入的信息量 它们将具有不同的高度 如果你给它们加上背景颜色你就可以看到 我如何给其他列最大高度的列的高度 您可以使用 jQuery 来执行此操作 http www cssnewbie com equal
  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m
  • 如何计算单击的甜甜圈元素的中点与负 y 轴之间的角度

    Consider the following codesample donut chart using jquery flot http jsfiddle net c5zsg6y3 26 now as i have added the im
  • 垂直对齐多行文本(菜单元素)?

    我正在尝试垂直对齐 UL 内的文本 问题是某些列表项具有不止一行文本 因此无法使用行高 小提琴 http jsfiddle net jaAYT http jsfiddle net jaAYT 这是我想要达到的结果 http img402 i
  • 哪种 Javascript 解决方案(不是 .htc)可以真正在 IE7 和 8 中实现抗锯齿圆角?

    哪种 JavaScript 解决方案 不是 htc 确实可以在 IE7 和 8 中实现抗锯齿圆角CSS3在支持的浏览器中给出 我尝试了很多 http www ruzee com blog ruzeeborders http www ruze
  • Android Accessibility 执行触摸操作

    我想知道是否可以使用 Android 辅助功能服务在屏幕上的位置执行触摸操作 例如 Bundle arguments new Bundle arguments putInt coord X X value arguments putInt
  • CSS 选择器:Active 不适用于 IE8 中的子元素单击

    我有以下 HTML 结构 div class wrapper div class control clickable img src logo png div div 以及以下 CSS control border 1px solid 00
  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs
  • 文本的彩虹色

    rainbowtext background image webkit gradient linear left top right top color stop 0 f22 color stop 0 15 f2f color stop 0
  • JavaFX使节点覆盖父节点边框颜色

    我有一个如下所示的节点 仅使用 css 我希望标签覆盖其父边框颜色 因此标签下方的边框颜色部分变得不可见 我用来制作这个边框的CSS代码 fx border color black fx border width 3 fx border r
  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh

随机推荐