firefox完全不支持text-emphasis系列属性，截至2026年7月仍无实现计划，所有变体均无效；safari需同时声明-webkit-text-emphasis和-webkit-text-emphasis-position（仅under right/over right有效）才可能渲染，且受字体字形和父元素样式限制；中文场景推荐缩写写法、position设为under、优先使用dot关键字，必要时降级为border-bottom或::before模拟。

为什么text-emphasis在Firefox里完全不生效

不是写法错，是Firefox根本没实现这个特性。截至2026年7月，text-emphasis、-moz-text-emphasis、甚至带-webkit-前缀的变体，在Firefox中全部无效——开发者工具里能看到声明，但计算样式里查不到值，也不触发重排。Autoprefixer不会生成-moz-前缀，因为MDN明确标注兼容性为“No support”，且无可用polyfill。

-webkit-text-emphasis在Safari里不显示的常见原因

Safari（尤其是iOS）只认-webkit-text-emphasis，但生效有硬性前提：

• 必须同时声明-webkit-text-emphasis-position，只写-webkit-text-emphasis: dot red会被静默丢弃
• text-emphasis-position仅支持over right和under right两种组合，left值被忽略
• 父元素若含transform、will-change或position: absolute，Safari可能直接跳过渲染
• 中文字体（如“微软雅黑”）常缺失强调符号字形，导致显示为空白或方块，这不是CSS问题，是字体本身限制

中文场景下text-emphasis的可靠写法

想让中文文字稳定显示圆点或芝麻标记，必须满足三要素：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 缩写形式优先：-webkit-text-emphasis: dot #e74c3c; text-emphasis: dot #e74c3c;，且-webkit-版本必须写在标准版前面
• 位置强制设为under：-webkit-text-emphasis-position: under; text-emphasis-position: under;，避免over导致悬空或截断
• 别用sesame或字符串（如"·"）：前者依赖字体支持，后者在Safari中渲染不稳定、字号缩放异常；dot是目前最稳妥的内置关键字

真正能跨浏览器落地的替代方案

如果项目必须支持Firefox或老旧Safari，text-emphasis就不是可选项，得降级：

• 用border-bottom模拟单线强调，简单但缺乏语义
• 用background-image: linear-gradient()画点状底纹，可控但无法随文字换行自动对齐
• 用::before伪元素逐字叠加，配合position: absolute精确定位，语义和控制力最强，但需遍历DOM、性能开销明显

字体字形缺失、引擎排版差异、属性支持断层——这些不是靠加前缀能绕过的，而是需要从设计阶段就接受text-emphasis在中文环境里的天然局限性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！