text-emphasis 目前仅 Safari 15.4+ 有限支持，需强制声明 text-emphasis-position（仅 over right/under right 有效），Firefox 完全不支持且无 polyfill；跨浏览器应降级为 border-bottom 或 background-image 模拟。
Chrome 以外的浏览器（尤其是 Safari 和 Firefox）对 text-emphasis 的支持极不统一，加 -webkit- 前缀不能“修复兼容性”，只能让 Safari 有限支持——Firefox 完全无视该前缀，且所有浏览器都要求显式声明 text-emphasis-position 才可能渲染。
为什么 -webkit-text-emphasis 在 Safari 里也常不生效
不是写法错，而是漏了关键前提：Safari 要求必须同时设置 text-emphasis-position，否则即使写了 -webkit-text-emphasis: dot red，也会静默丢弃整个声明。这和 box-sizing 或 flex 不同——它不是“有前缀就能用”，而是“没位置声明就当没写”。
-
-webkit-text-emphasis仅在 Safari 15.4+ 有基础支持，且只响应over right和under right两种组合（left值被忽略） - 若父元素用了
transform、will-change或position: absolute，Safari 可能直接跳过渲染强调标记 - 字体本身不包含强调符号字形（如多数中文字体），会导致标记显示为空白或方块——这不是 CSS 问题，是字体缺失
Firefox 完全不支持 text-emphasis 系列属性
截至 2026 年 5 月，Firefox 仍无任何实现计划，text-emphasis、-moz-text-emphasis、甚至带前缀的变体全部无效。开发者工具里能看到声明，但计算样式中不会出现对应值，也不触发重排。
- 不要尝试用 Autoprefixer 补
-moz-text-emphasis——它不存在，插件也不会生成 - MDN 明确标注 Firefox 兼容性为 “No support”，且无 polyfill 可用（DOM 层无法用 JS 模拟字符级装饰定位）
- 若项目需 Firefox 支持，唯一可行路径是降级为
background-image+linear-gradient模拟点状强调，或用::before+ 绝对定位逐字叠加，但性能与语义均受损
text-emphasis-style 自定义字符的隐藏限制
用字符串如 '★' 或 '•' 看似自由，实际受制于字体渲染引擎和 Unicode 版本。
立即学习“前端免费学习笔记（深入）”；
- Safari 对 emoji 字符（如
'❤'）的支持不稳定：iOS 17 上可能渲染为彩色 emoji，macOS Ventura 则回退为单色符号，尺寸缩放不一致 - 指定
text-emphasis-style: '—'时，Safari 会把它当连字符处理，宽度拉伸；而 Firefox 直接忽略整条规则 - 强调标记字号固定为文本字号的 50%，无法用
font-size单独控制——若主文字是14px，标记就是7px，小字号下极易糊成黑点
真正能跨浏览器落地的替代方案
别把 text-emphasis 当成“CSS 新功能尝鲜项”，它目前只适合 Safari 专属内部系统，或已明确排除 Firefox/Edge 的场景。实际项目中更可靠的做法是：
- 用
span包裹需强调的文字，配合border-bottom: 2px solid red+padding-bottom: 2px模拟下强调线（兼容所有现代浏览器） - 需要点状效果时，改用
background-image: radial-gradient(circle, red 2px, transparent 2px)配合background-repeat: repeat-x和background-position: bottom - 若必须语义化强调，优先用 ARIA：
aria-label="重点"+ 视觉样式分离，确保屏幕阅读器可读，视觉层再用 CSS 微调
最易被忽略的一点：强调标记的位置（over/under）在不同字体下的垂直偏移量差异极大，哪怕同一浏览器，换一个中文字体（如 PingFang SC vs Noto Sans CJK），标记就可能贴着文字或悬空半行——这没法靠 CSS 修正，只能实机多测。
