正确写法是rb与rt必须成对且顺序固定：汉hàn；多字需分拆为多个ruby；必加css控制rt样式，禁用vertical-align；rp仅用于兼容旧环境，须严格嵌套在rt内。
直接用 ruby 标签加拼音，多数情况会错位、不显示或降级成“汉字hàn”平铺——根本原因是结构没写对，不是浏览器不支持。
rb 和 rt 必须成对出现，且顺序不能颠倒
浏览器只认 rb + rt 的组合语义，漏掉 rb 或把 rt 放前面，Chrome/Firefox 可能勉强渲染，但 Safari 和旧 WebView 会直接忽略注音。
-
ruby容器里必须有且仅有一个rb（包裹被注音字），紧跟着一个rt（放拼音） - 错误写法：
<ruby>汉<rt>hàn</rt></ruby>—— 缺rb，部分环境失效 - 正确写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 多字必须拆开：
<ruby><rb>中</rb><rt>zhōng</rt></ruby><ruby><rb>国</rb><rt>guó</rt></ruby>，不能共用一个rt
rp 不是必需的，但加了更稳妥
rp 只在不支持 ruby 的老环境（如 IE、Outlook 邮件客户端）里起作用：它让括号包裹拼音，避免“汉字hàn”这种难读的平铺结果。
- 不加
rp：现代浏览器正常，但旧读屏软件可能把拼音直接读出来，无上下文 - 加
rp：需严格嵌套在rt内，且只含括号字符，例如<rt><rp>(</rp>hàn<rp>)</rp></rt> - 别写成
<rp>(</rp><rt>hàn</rt><rp>)</rp>—— 结构错，rp被忽略
CSS 不重置，注音大概率错位或截断
浏览器默认对 rt 的渲染差异极大：Chrome 缩小上标，Safari 可能不缩放、不居中，甚至垂直偏移。不干预 CSS，就等于依赖不可控行为。
- 必设样式：
ruby rt { font-size: 0.7em; line-height: 1; ruby-position: over; ruby-align: center; } - 禁用
vertical-align: super—— 它基于行高计算，不是基字定位，易偏移 - 父容器建议加
white-space: nowrap，防止换行撕裂字-音对应关系 - 别给
ruby设display: inline-block或float—— 破坏内联流，Safari 尤其敏感
别指望 ruby 自动处理多音字或整句拼音
ruby 是静态语义容器，不解析上下文，也不支持动态声调、变调或轻声规则。所有拼音都得人工校对后硬编码进去。
- “长”在“长大”读
zhǎng，在“长度”读cháng，必须手动区分：<ruby><rb>长</rb><rt>zhǎng</rt></ruby>大 - 整句自动拼音？用
pinyin-pro这类库生成后再套ruby结构，别手写 - 需要屏幕阅读器朗读拼音？
rt默认被跳过，得额外加aria-label或改用span+aria-describedby - 服务端注入空
<rt></rt>？部分读屏器会报“空白注音”，务必过滤空值
真正麻烦的不是写法，而是每个字都得单独包裹、每个拼音都得人工核对；一旦内容来自 CMS 或用户输入，就得先做分字+拼音映射，再拼 HTML —— 这步绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
