ruby标签需与rb、rt严格配合才能正确显示拼音，缺rb、顺序错或未逐字拆分均会导致失效；rp为降级保底必需，css须用ruby-position和font-size百分比确保兼容性。
直接说结论：ruby 标签不是“加拼音的快捷键”，它是一套语义结构，必须和 rb、rt 配合才能生效；漏掉 rb 或把 rt 放错位置，90% 的浏览器会直接忽略注音。
为什么写了 ruby 却没显示拼音？
最常见原因是结构断裂：浏览器只认 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 这种写法。以下写法全都不行：
-
<ruby>汉<rt>hàn</rt></ruby>（缺rb，Safari 17+ 和 Chrome 115+ 会降级为普通文本） -
<ruby><rt>hàn</rt><rb>汉</rb></ruby>（rb和rt顺序颠倒，匹配错位） -
<ruby><rb>汉字</rb><rt>hàn zì</rt></ruby>（两个字共用一个rt，无法对齐，屏幕阅读器读成“汉字 hàn zì”）
多字注音必须逐字拆开
中文是字级注音，不是词级。哪怕“重庆”“长大”这种固定词组，也得手动按字切分，否则拼音会挤在一起、换行错乱、TTS 朗读错误。
- 正确：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 错误：
<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby> - 多音字更要小心：“长”在“长度”里读
cháng，在“生长”里读zhǎng，必须分别写两套ruby
必须加 rp 吗？不加会怎样？
rp 不是装饰，是降级保底的关键。不加的话，IE11、Outlook 桌面版、旧版安卓 WebView 会直接显示“汉hàn”，拼音贴在字后面，完全不可读。
- 推荐写法：
<ruby><rb>你</rb><rt>nǐ</rt><rp>(</rp><rp>)</rp></ruby> - 现代浏览器自动隐藏
rp，只渲染rt - 老环境则显示“你(nǐ)”，保留可读性
-
rp必须成对、只能是括号字符，写成<rp>(nǐ)</rp>是无效的
CSS 调整时最容易踩的三个坑
默认样式在 Chrome/Firefox/Safari 差异很大，但别乱用 position: absolute 或 margin-top 往上拉——缩放、换字体、改行高时全崩。
- 必须加：
ruby { ruby-position: over; }（显式声明上标位置，避免竖排跑偏） - 必须设：
rt { font-size: 0.65em; line-height: 1; }（百分比比像素更适应响应式） - 禁用：
rt { vertical-align: super; }（它基于行高计算，不是基字，容易偏移） - 连续多个
ruby在 iOS Safari 上可能有微小间距，可用父容器font-size: 0+ 子元素重设字号缓解
真正麻烦的从来不是写法，而是当你要支持屏幕阅读器、邮件客户端、打印 PDF、或者让拼音在 200% 缩放下依然对齐时，rb 和 rt 的一一对应关系，就是唯一能靠得住的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
