ruby标签必须配rb和rt才能生效，单独使用无效；rb显式包裹基字提供语义锚点，rt紧邻其后提供注音内容，二者一一对应、顺序不可颠倒，缺一则浏览器降级为普通文本，无障碍与跨浏览器兼容性均失效。
直接用 ruby 标签加拼音，不配 rb 和 rt，90% 的现代浏览器会忽略或错位渲染——它不是“加拼音的快捷键”，而是语义容器，结构断裂就失效。
为什么 ruby 单独写没用，必须带 rb 和 rt
浏览器只把 rb+rt 这一对组合识别为有效注音单元。ruby 本身只是语义包裹层，没有 rb，基字锚点丢失；没有 rt，注音内容不存在。Chrome 115+、Safari 17.4+、Firefox 120+ 都已明确要求显式 rb，否则降级为普通文本流。
-
<ruby>汉<rt>hàn</rt></ruby>→ 多数新版浏览器不渲染上标，拼音可能贴在右侧甚至被截断 -
<ruby><rb>汉</rb><rt>hàn</rt></ruby>→ 正确，基字与注音一一绑定，语义完整 - 漏掉
rb后，屏幕阅读器无法关联“哪个字读什么”，无障碍支持直接归零
rt 必须是 ruby 的直接子元素，且紧贴对应 rb
DOM 层级和顺序决定匹配逻辑：浏览器按出现顺序将第 n 个 rb 和第 n 个 rt 绑定。中间插入空格、换行、其他标签（如 span），都会导致错位或跳过。
- ✅ 正确：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - ❌ 错误：
<ruby><rb>重</rb><span> </span><rt>chóng</rt></ruby>（空格破坏紧邻关系） - ❌ 错误：
<ruby><rt>chóng</rt><rb>重</rb></ruby>（顺序颠倒，rt会被挂到前一个ruby的末尾） - 连续多个
ruby在 iOS Safari 上可能出现微小间距异常，可用父容器设font-size: 0，再给每个ruby单独设字号缓解
rp 不是可选项，而是降级兼容的刚需开关
rp 的作用不是美化，是在 IE11、Outlook 桌面版、老旧安卓 WebView 等不支持 ruby 的环境里，让拼音以括号形式 fallback 显示（如“汉(hàn)”）。没有它，降级后就是“汉hàn”连排，完全不可读。
- ✅ 推荐写法：
<ruby><rb>你</rb><rt>nǐ</rt><rp>( </rp><rp> )</rp></ruby>（rp成对、纯括号、嵌套在rt同级） - ❌ 常见错误：
<rp>( </rp><rt>nǐ</rt>（漏掉右括号rp，老环境可能只显示左括号） - ⚠️ 注意：
rp内容只能是(、)、[、]等纯符号，含空格或文字会被浏览器忽略 - 如果项目明确不支持 IE 或邮件客户端，可省略
rp，但需确认 CMS 输出、静态站点生成器是否真能过滤掉空rt
CSS 控制 rt 时最容易踩的三个坑
默认样式在各浏览器中差异极大：Chrome 缩得小但居中好，Firefox 行高易撑开，Safari 垂直偏移不稳定。靠 margin-top 或 vertical-align 模拟上标，缩放或换字体时必然偏移。
- 别用
vertical-align: super—— 它基于行高计算，不是相对于基字，会导致不同字号下错位 - 禁用
position: absolute或visibility: hidden—— 降级后拼音直接消失，且破坏屏幕阅读器识别 - 优先用标准属性：
ruby { ruby-position: over; }+rt { font-size: 0.65em; line-height: 1; }，比像素值更适配响应式缩放 - 连续多字注音时，
ruby默认是inline元素，若容器窄，rt可能溢出或挤占相邻文字，加white-space: nowrap到父容器更可控
真正麻烦的从来不是写对结构，而是处理“重庆”这种地名、“一衣带水”这种成语、以及服务端注入时的 XSS 防御——动态拼接必须确保 rb 和 rt 严格闭合，且特殊字符（如 &、）已转义，否则 DOM 一断，整段注音就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
