ruby标签专用于东亚文字发音或注释，语义明确不可替代；必须用于需机器识别读音的场景，如中文拼音标注、日文假名注音；基本结构须含rb与rt且一对一，旧浏览器降级显示纯文本。
ruby 标签不是装饰性换行或排版工具，它专用于标注东亚文字中的发音或注释，语义明确、不可替代。滥用 ruby（比如用来模拟下标、做 UI 小标签）会破坏可访问性，且屏幕阅读器会按「注音—被注字」逻辑朗读，错配将导致信息混乱。
什么时候必须用 ruby 而不能用 span + CSS
当你需要为汉字、日文假名或韩文字符提供机器可识别的发音或语义注解时，ruby 是唯一符合 HTML5 语义规范的方案。典型场景包括：
- 中文古籍或教材中为生僻字标注普通话拼音（如「饕
rubyrt」） - 日文网页中为汉字标注假名读音（如「東京
rubyrt」） - 面向视障用户的教育类页面，需确保屏幕阅读器能正确区分「字形」与「读音」
用 span 套样式虽然视觉相似，但无法传递结构关系，aria-label 也难以准确映射到每个被注字——ruby 的嵌套结构（rb + rt）是浏览器和辅助技术唯一能可靠解析的模式。
ruby 的基本结构与常见错误写法
合法结构必须包含 rb（base text）和 rt（ruby text），且 rb 必须是文字内容，不能是空标签或仅含空格：
<ruby><rb>漢</rb><rt>hàn</rt><rb>字</rb><rt>zì</rt></ruby>
以下写法均无效：
- 漏掉
rb，只写<ruby><rt>hàn</rt>漢</ruby>（HTML 解析为普通文本，无语义） - 把多个字塞进一个
rb：<rb>漢字</rb><rt>hànzì</rt>（应一对一，否则语音朗读错位） - 在
ruby外层包裹div并强行设display: inline-flex（破坏默认流式布局，影响换行和缩放）
浏览器兼容性与实际渲染差异
现代浏览器（Chrome 110+、Firefox 115+、Safari 17+）对 ruby 支持良好，但细节有差别：
- Chrome 和 Edge 默认将
rt渲染在基字上方，且字体较小；Firefox 默认在右上角；Safari 可随系统语言设置变化 - 移动端 Safari 对连续
ruby块的换行支持较弱，长句可能出现挤叠，建议配合ruby-position: under或限制单行字数 - 不支持
ruby的旧浏览器（如 IE）会忽略标签，仅显示内部纯文本——这不是 bug，而是降级预期，无需 polyfill
若需统一表现，可用 ruby + 少量 CSS 控制 rt 字体大小和垂直偏移，但避免重写整个布局逻辑。
真正容易被忽略的是：当 ruby 用在链接或按钮内时，rb 内容才是可聚焦/可点击主体，rt 不参与交互——这意味着「点中拼音却没触发跳转」是正常行为，不是 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
