Chrome 显示黄底、Firefox 白底黑字是因为各浏览器 UA 样式表对 的默认 background-color 和 color 定义不同：Chrome 设为 yellow，Firefox 设为 transparent 并依赖系统高亮色。
用 <mark></mark> 标签标注重点时，为什么 Chrome 显示黄底、Firefox 却是白底黑字
<mark></mark> 是 HTML5 原生语义化标签，浏览器默认样式由 UA stylesheet 决定，各厂商实现不同。Chrome/Edge 默认设 background-color: yellow，Firefox 则设为 background-color: transparent 且依赖系统高亮色（可能不可见），Safari 早期版本甚至完全无样式。
排查第一步不是改代码，而是打开开发者工具的「Computed」面板，直接查 background-color 和 color 的最终值来源——它会明确标出是来自 user agent stylesheet 还是你的 CSS。
- 不要只看「Styles」面板里写的规则，要确认是否被更高优先级样式覆盖或被
!important干扰 - 检查是否启用了系统级深色模式，Firefox 有时会把
<mark></mark>渲染成浅灰背景+深灰文字，视觉上像“没生效” - 在无任何自定义 CSS 的空白 HTML 文件中单独测试
<mark></mark>，排除项目全局样式污染
如何让 <mark></mark> 在所有浏览器显示一致的高亮效果
必须显式重置默认样式，不能依赖 UA 行为。最简方案是给 <mark></mark> 加一条强制声明：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.2em;
}
注意几个关键点：
立即学习“前端免费学习笔记（深入）”；
-
padding建议用em单位，避免字号变化时高亮框贴边或过宽 - 避免用纯黄色
#ffff00，它在深色背景下可读性差；推荐 Material Design 的#ffeb3b或 WCAG AA 认证的对比度组合 - 不要只设
background，漏掉color可能在某些浏览器（如旧版 Safari）下文字继承父级深色导致反差不足
遇到 <mark></mark> 内部文字换行错位或背景被截断怎么办
这是 display 类型引发的渲染差异：部分浏览器将 <mark></mark> 视为 inline，但当内容含空格、连字符或 CJK 字符时，换行逻辑不一致，导致背景块断裂。
解决方法是统一控制其盒模型行为：
- 加
white-space: inherit确保继承父容器的换行策略 - 对需要严格包裹的场景，加
display: inline-block（但慎用，可能破坏行内流布局） - 更稳妥的做法是加
box-decoration-break: clone，尤其在跨行高亮时能保持背景连续（Chrome/Firefox 支持良好，Safari 15.4+ 支持）
用 JavaScript 动态插入 <mark></mark> 后样式失效或闪烁
常见于搜索高亮类功能：JS 找到文本节点后替换成 <mark></mark> 包裹的片段，但首次渲染时样式未就绪，或 Vue/React 中 key 处理不当导致重复挂载。
关键检查项：
- 确认 JS 插入时机：不要在
DOMContentLoaded前操作 DOM，否则样式表可能未加载完成 - 避免直接用
innerHTML替换，改用document.createElement('mark')+textContent，防止 HTML 解析干扰 - 若用框架，确保
<mark></mark>不被 SSR 预渲染为纯文本（如 Next.js 中需用useEffect延迟到客户端执行）
最易被忽略的是字体加载延迟：Web Font 加载完成前，浏览器按 fallback 字体排版，<mark></mark> 宽度计算错误，等字体加载后重排造成背景跳动。加 @font-face 的 font-display: swap 或预设最小宽度可缓解。
