ruby标签必须包含rt子元素才能触发注音渲染，且需配对rb与rt、添加rp降级兼容，并用ruby-position控制样式。
ruby 标签不加 rt 就完全不生效
写 <ruby>汉</ruby> 或空标签 <ruby></ruby>，浏览器只当普通内联容器处理，注音根本不会出现。真正触发渲染的是 rt —— 它必须是 ruby 的直接子元素，且不能被换行、空格或其它标签隔开。
常见错误包括：<ruby>汉</ruby><rt>hàn</rt>（rt 脱离父级）、<ruby>汉<rt>hàn</rt></ruby>（缺 rb，现代 Safari/Chrome 已拒绝渲染）。必须写成：
<ruby><rb>汉</rb><rt>hàn</rt></ruby>
否则结构断裂，结果不可预测：拼音错位、漏标、甚至整段被忽略。
多字注音必须每个字单独套 ruby + rb + rt
把“汉字”写成 <ruby><rb>汉</rb><rb>字</rb><rt>hàn zì</rt></ruby> 是无效的——浏览器按 DOM 顺序一对一匹配，两个 rb 只能对应两个 rt，但你只给了一个，多数引擎会丢弃或错配。
正确做法是逐字拆开：
<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>
- 语义清晰：每个字有唯一基文与唯一注音
- 排版可控：CSS 可单独控制某字的
rt样式（比如高亮多音字） - 无障碍支持完整：屏幕阅读器能分别播报“汉”和“字”，而非连读“hàn zì”
- 避免错读：“重庆”必须写成
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，否则可能被误读为zhòng qìng
rp 不是装饰，是降级兼容的关键开关
rp 的作用不是美化，而是在不支持 ruby 的环境（如 IE11、旧版 Outlook、部分邮件客户端）中提供可读 fallback。没有它，降级后就是“汉hàn”连在一起，完全不可读。
标准写法是成对出现，且仅含纯括号字符：
<ruby><rb>你</rb><rt>nǐ</rt><rp>( </rp><rp> )</rp></ruby>
现代浏览器会隐藏 rp，只渲染 rt；老环境则显示“你(nǐ)”。漏掉一对、或在 rp 里塞文字（如 <rp>(拼音)</rp>），都会导致降级失败。
样式控制必须用 ruby-position，别靠 margin 或 vertical-align
用 rt { margin-top: -0.5em } 或 vertical-align: super 属于模拟上标，极易在不同字体、字号、行高下偏移失准。现代浏览器支持标准属性 ruby-position，值为 over（默认）或 under，能真正触发内置排版引擎。
关键 CSS 必须覆盖：
ruby { ruby-position: over; }
ruby rt {
font-size: 0.7em;
line-height: 1;
text-align: center;
}
额外注意：Safari 对连续多个 ruby 的间距处理异常，可用父容器 font-size: 0 + 子元素重设字号缓解；iOS Safari 对 rp 渲染较弱，括号可能不出现，但不影响 rt 主体显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
