mark标签背景色需显式重写CSS，因Safari 12–13等旧版忽略background-color设置，须用@supports伪元素兜底，并注意GitHub、微信公众号等环境对HTML标签的过滤限制。
mark 标签的背景色必须用 CSS 显式重写，浏览器默认黄色只是兜底样式，不声明就容易在 Safari 12–13、Edge 17–18 等旧版中失效或渲染异常。
为什么直接写 mark { background-color: #ffcc00; } 有时没效果
常见错误现象是：Chrome 里看着正常，Safari 打开后还是刺眼的默认黄；或者 Edge 里高亮区域一闪而过、文字被裁掉一半。根本原因不是 CSS 写错了，而是：
- Safari 12 及更早版本完全忽略
background-color在mark上的设置，只认原生黄色（#ff0） - 某些 Android WebView（如 4.3）对
mark的行内盒模型处理异常，padding或line-height不生效，导致背景“贴不住”文字 - 第三方 UI 库（如 Ant Design、Element Plus）可能全局重置了
mark样式，或用 CSS-in-JS 覆盖了你的规则，优先级没打过
安全可靠的自定义写法（含兼容 fallback）
别只靠一条 mark 规则。实际项目中推荐这样写：
mark {
background-color: #fff3cd;
color: #856404;
padding: 0.15em 0.3em;
border-radius: 2px;
}
/* Safari 12–13 兜底：用伪元素模拟背景 */
@supports not (background-color: highlight) {
mark {
position: relative;
}
mark::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-color: #fff3cd;
z-index: -1;
}
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
color和background-color，避免深色模式下文字不可读 - 加
padding和border-radius是为了视觉舒适，但注意不要过大，否则在窄容器里换行错位 -
@supports里的伪元素方案只在 Safari 旧版触发，不影响现代浏览器性能
哪些场景下 mark 样式会意外失效
不是所有地方都能直接用 CSS 控制 mark。以下情况容易翻车：
- GitHub README：支持
<mark>，但只在普通段落生效；<pre><code>块里会被当纯文本显示 - 微信公众号后台：HTML 被严格过滤，
<mark>标签直接被删，得改用内联style="background-color:#fff3cd"（但部分版本也会删style属性） - Hugo 默认 Goldmark 解析器：禁用 HTML，需手动配置
unsafe = true才解析<mark> - 用户复制粘贴到富文本编辑器（如 Notion、飞书文档）：
<mark>语义丢失，只剩文字
真正难的不是写那几行 CSS，而是判断当前环境是否“认”这个标签——它既是个视觉标记，更是个语义信标。一旦脱离支持环境，mark 就退化成无意义的包裹符。所以每次加之前，先问一句：这段高亮，是给机器看的（SEO/读屏器），还是只给人眼服务？答案不同，实现路径就完全不同。
