正确写法必须显式使用rb标签锚定每个汉字，如汉hàn；多字需逐字配对，rb与rt数量、顺序、层级须严格一致，否则拼音错位或不显示。
ruby 和 rt 不是靠属性控制拼音标注的——它们靠**结构合法性与语义嵌套**生效。写错结构，加再多属性也没用。
必须显式写 rb，不能省略
很多人以为 <ruby>汉<rt>hàn</rt></ruby> 就行，实际在 Safari、旧 Edge 甚至部分 Android WebView 中会失效：拼音错位、飘左、或完全不显示。
原因在于：rt 必须有明确的基文锚点，而 rb 就是那个锚点。没有 rb，rt 就成了“无主注音”，ruby-align 等样式全部失效。
- 正确写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 多字也得逐字包：
<ruby><rb>重</rb><rt>chóng</rt><rb>庆</rb><rt>qìng</rt></ruby> - 别用
span或换行打断结构，rb和rt必须同级且顺序严格对应
ruby-align 和 ruby-position 必须显式声明
浏览器默认值不可靠：
Safari 16 及更早版本不实现 ruby-align: center 默认行为，会退回到 start（左对齐）；Chrome/Firefox 在 text-align: right 或 RTL 环境下也可能被覆盖。
- 全局加这一句最稳：
ruby { ruby-align: center; -webkit-ruby-align: center; } - 垂直位置用
ruby-position: over（横排默认值），别用margin-top模拟，否则缩放/换字体就偏移 -
ruby-align生效的前提是：每个汉字都有rb，且rb和rt数量一致
字体与行高必须协同设置，否则拼音会被裁或压字
只设 rt { font-size: 0.5em; } 是常见翻车点：不同浏览器缩放比例不同，Safari 可能缩到 40%，Chrome 60%，导致拼音高度不一、上下错位，甚至顶部被截。
- 推荐组合：
ruby { line-height: 1.2; }+rt { font-size: 0.6em; line-height: 1; } - 避免用百分比（如
50%），统一用 em，确保响应式缩放时比例稳定 - 禁用
position: absolute覆盖原生布局——会破坏屏幕阅读器识别和打印样式
动态生成时最容易漏掉的三个校验点
用 pinyin-pro 或 pypinyin 自动生成时，结构合法 ≠ 内容对齐。出错往往静默发生，直到用户反馈“拼音贴错字”。
- 检查汉字字符串长度 vs 拼音数组长度：emoji、全角标点、组合字符（如「ā」）可能让二者不等
- 多音字必须人工干预：库返回的只是常用音，「长」在「长度」里是
cháng，在「生长」里是zhǎng，代码不会自动判断上下文 -
rt内只能放纯文本拼音：不能含<span></span>、声调数字（如han4）需提前转为带符号形式（hàn），否则 CSS 对齐和语音引擎都可能异常
真正难的不是写对标签，而是让每个 rb 都有唯一对应的 rt，且二者在 DOM 顺序、数量、语义层级上严丝合缝。浏览器不报错，但只要错一位，整个注音链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
