<ruby>标签必须包含<rt>子元素，否则注音不显示；<rt>需直接嵌套在<ruby>内，可多个配对；<rp>仅能位于<rt>内部开头或结尾且内容仅为括号字符；Chrome会渲染<rp>导致括号可见，Safari则隐藏；推荐服务端按UA移除<rp>或CSS强制隐藏。
ruby 标签必须配 rt，否则注音不显示
只写 <ruby>汉</ruby> 是无效的——rt 是必需子元素，不是可选装饰。浏览器会忽略没有 rt 的 ruby 块，文字照常显示，但注音完全消失。
-
rt必须直接嵌套在ruby内，不能隔层（如不能<ruby><span><rt>hàn</rt></span></ruby>） - 一个
ruby可含多个基字 + 多个rt，例如<ruby>中<rt>zhōng</rt>国<rt>guó</rt></ruby> - 服务端渲染时若拼音为空，应跳过整个
rt，而不是输出<rt></rt>——屏幕阅读器可能读作“空白注音”
rp 标签不是“加括号就完事”，位置和内容有硬约束
rp 的唯一合法位置是 rt 的**内部开头或结尾**，且内容只能是纯括号字符（(、)、[、] 等），多一个空格或字母都会导致 fallback 失效。
- 正确写法：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - 错误写法：
<rp>(</rp><rt>hàn</rt><rp>)</rp>（rp在rt外，被忽略） - 错误写法：
<rt><rp>( </rp>hàn</rt>（rp含空格，部分浏览器不触发 fallback） - IE ≤10 和旧版 Firefox 不支持
ruby，此时仅靠rp包裹才能显示 “汉(hàn)” 这类可读形式
Chrome 和 Safari 对 rp 的处理不一致，上线前必须实测
Chrome（v120+）默认把 rp 当作可见内容渲染，即使支持 ruby，也会在注音两侧多出括号；Safari 则按规范隐藏 rp。结果就是同一段 HTML，在 Chrome 里显示为 “汉(hàn)”，在 Safari 里才是正确的 “汉” 上方小字 “hàn”。
- 最稳方案：服务端或构建时根据 UA 移除
rp（仅对 Chrome / Edge 等 Blink/WebKit 新内核） - 次选方案：用 CSS 隐藏
rp，但需加!important并限定作用域，例如ruby rt rp { display: none !important; } - 不要依赖 JS 动态删
rp—— 页面闪动明显，且 SSR 场景下首屏仍暴露问题 - 注意：Firefox 125+ 已原生支持
ruby，不再需要rpfallback，但老版本仍占一定比例
rt 字号不能靠百分比缩放，固定像素 + line-height 才可靠
给 rt 设 font-size: 70% 看似合理，实际在不同浏览器中计算基准不同（有的按父级 ruby，有的按根字体），容易导致注音偏高、截断或与基字错位。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
rt { font-size: 12px; line-height: 1; vertical-align: text-top; } - 避免给
ruby设display: inline-block—— 会破坏行内流，引发意外换行或间距异常 - 竖排文本需显式声明
ruby { ruby-position: over; }，否则 Safari 可能将注音放在右侧 - 注音字体建议用无衬线体（如
font-family: "PingFang SC", "Hiragino Sans GB";），避免 serif 字体在小字号下糊成一片
rp 的双重渲染问题——它不像 CSS 兼容性那样有渐进增强空间，而是直接让用户看到错误格式。 
