必须显式使用<rb>标签包裹每个被注音字符，否则Chrome 120+、Firefox 125+、Safari 17+等现代浏览器将忽略<rt>，仅平铺显示“汉hàn”；多字须逐字独立嵌套<ruby><rb>字</rb><rt>拼音</rt></ruby>，<rp>为旧环境兜底必需，不可省略或错位。
ruby标签必须显式包含rb才能在现代浏览器中渲染拼音
Chrome 120+、Firefox 125+、Safari 17+ 已将rb视为硬性结构组件，不写rb就等于没写注音。你可能会看到<ruby>汉<rt>hàn</rt></ruby>在旧教程里出现，但现在它只会被当纯文本平铺显示为“汉hàn”。
必须写成：<ruby><rb>汉</rb><rt>hàn</rt></ruby>
-
rb必须包裹每一个被注音字符，包括空格、数字、英文、emoji、全角标点 - 如果原文是“张3”，就得拆成两个
ruby：<ruby><rb>张</rb><rt>zhāng</rt></ruby><ruby><rb>3</rb><rt></rt></ruby>（哪怕数字没拼音，rt也不能省） - 漏掉一个
rb，后续所有rb/rt配对都会错位，整段注音链断裂
多字注音必须逐字用独立ruby结构，不能合并
把“中国”塞进一个ruby里：<ruby><rb>中国</rb><rt>zhōng guó</rt></ruby>，表面能出字和拼音，但实际风险极高：
- 多数浏览器只给最后一个字（“国”）标音，“中”的拼音被忽略或压扁
- 屏幕阅读器无法分别播报“中”和“国”，TTS 会读成单音节
- CSS 无法单独控制“中”的拼音字号或颜色，
rt选择器匹配不到具体字级 - iOS Safari 连续多个
ruby可能有微小间距异常，可用父容器设font-size: 0再重设子元素字号缓解
正确写法是：<ruby><rb>中</rb><rt>zhōng</rt></ruby><ruby><rb>国</rb><rt>guó</rt></ruby>
立即学习“前端免费学习笔记（深入）”；
rp不是可选装饰，而是降级兼容的关键开关
rp的作用不是美化，是在 IE11、旧版 Outlook、部分安卓 WebView 等不支持ruby的环境里提供可读 fallback。没有它，降级后就是“汉hàn”连在一起，完全不可读。
标准写法必须成对且仅含括号：<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
- 现代浏览器会隐藏
rp，只渲染rt - 老环境则显示“汉(hàn)”，括号让语义清晰
-
rp必须严格嵌套在ruby内、紧贴rt两侧，不能出现在rb外或rt外，否则被忽略 - 如果项目明确不支持 IE 或老旧 UA，可省略
rp，但需确认 CMS、邮件客户端等下游是否真绕得过
CSS 控制rt位置时优先用ruby-position而非margin
用rt { margin-top: -0.5em }往上拉拼音，属于“模拟定位”，极易在不同字体、字号、行高下偏移失准。现代浏览器都支持标准属性ruby-position，它触发的是浏览器内置的 ruby 排版引擎。
推荐基础重置样式：
ruby { display: ruby; }
ruby rt {
font-size: 0.7em;
line-height: 1;
text-align: center;
ruby-position: over;
ruby-align: center;
}
-
ruby-position: over确保拼音始终在基字上方（默认值，但显式声明更可靠） -
ruby-align: center让拼音相对于汉字水平居中（默认是start，易左偏） - 别用
vertical-align: super——它基于行高偏移，不是相对于基字 - Safari 对
ruby的display计算有偏差，加ruby { display: ruby; }可强制识别
最易被忽略的其实是rb的强制性——它不是语法糖，而是现代浏览器渲染拼音的硬性前提；另外，所有非汉字字符都得参与结构包裹，否则整段注音链就断了。
