必须同时设置 background-color 和 color，因为仅设 color 不影响背景色，且默认黄色在各浏览器中不一致，易导致对比度不足或深色模式下不可见；最小安全写法为 mark { background-color: #ff9e44; color: #fff; }。
为什么只写 color 不会改变 <mark></mark> 的背景色
浏览器对 <mark></mark> 的默认样式是 background-color: #ff0（亮黄） + color: #000（黑字），但这个黄色只是 UA 样式建议，不是强制规则。只设 color: red 不会影响背景，文字反而可能糊在残留的黄色底上——比如红字配黄底，对比度极低；或者黄底被 normalize.css 清掉后，只剩红字压在白背景上，根本看不出“高亮”。
必须同时声明 background-color 和 color，且两者对比度 ≥ 4.5:1（可用 DevTools 的 Accessibility 面板验证）
- 避免用
background简写，它可能意外带入 UA 默认的padding或line-height，导致行距错乱 - 不要依赖默认
yellow值：Chrome、Firefox、Safari 对其渲染不一致，有的偏绿、有的偏浅 - 深色模式下，未显式设置
background-color的<mark></mark>可能完全不可见（尤其企业内网主题或 CSS 重置后）
<mark></mark> 自定义背景色的最小安全写法
最简、最稳的覆盖方式是直接重写两个关键属性：
mark {
background-color: #ff9e44;
color: #fff;
}
这个组合满足 WCAG AA 对比度要求（约 5.2:1），且避开深色模式陷阱。
- 别用
background，只用background-color—— 防止意外继承 UA 的padding或border - 如果项目用了 CSS 重置（如
normalize.css），检查是否清除了mark的默认padding；若需保留呼吸感，显式加padding: 2px 6px - 多行段落中加
vertical-align: middle，避免因padding撑开行高导致基线错位
旧版 Safari（≤15.6）对 border-radius 的兼容性坑
给 <mark></mark> 加圆角时，Safari ≤15.6 可能裁切掉圆角，尤其当父容器有 overflow: hidden 或字体渲染较粗时。
- 首选方案：用
box-shadow: inset 0 -2px 0 #007acc模拟下划线式强调，绕过圆角渲染问题 - 若坚持用
border-radius，必须配合overflow: hidden在父级容器上（不是mark自身） - 测试时打开 Safari 开发者工具 → “Rendering” 面板 → 勾选 “Show paint rectangles”，确认圆角区域是否被正确绘制
打印样式表里 <mark></mark> 仍带背景？
默认情况下，<mark></mark> 在打印时仍保留背景色，可能造成墨水浪费或可读性下降。
必须显式重置：
@media print {
mark {
background: transparent;
color: inherit;
}
}
- 别漏掉
color: inherit，否则打印时文字可能变灰或消失 - 如果用了自定义颜色（如橙色），打印前应统一降级为纯文本强调，而非依赖背景色
- 某些 PDF 导出插件（如 wkhtmltopdf）会忽略
@media print，需额外配置--no-stop-slow-scripts参数确保生效
<mark></mark> 的语义价值只有在所有环境里都稳定可见时才算真正落地。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
