ruby标签本质是为东亚文字提供注解文本的语义容器，必须严格一对一匹配基字与rt内容，多字注音需拆分为多个ruby并列，且需重置css以统一各浏览器渲染效果。
ruby标签不是“加拼音”的快捷键
它本质是为东亚文字提供「注解文本」的语义容器，不是排版工具。浏览器只保证语义正确时才渲染 rt 内容；语义错乱（比如基字多于一个字符）会导致 Safari 完全忽略 rt，或 Chrome 把拼音挤成一串小灰字无法对齐。
- 必须一对一：每个汉字单独套一个
ruby，rt只能对应它紧邻的单个基字 - 不能省略基字：
ruby里必须有可渲染的文本内容（哪怕只是纯字符），不能只写<ruby><rt>hàn</rt></ruby> -
rb标签虽语义清晰，但 IE 和部分安卓 WebView 不支持；生产环境建议直接用纯文本作基字
多字注音必须拆成多个ruby并列
把「汉字」两个字和「hàn zì」塞进同一个 ruby 是常见错误，rt 没法自动分词对齐，结果在 Safari 中拼音堆在一起、垂直偏移异常，甚至被截断。
- ✅ 正确写法：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby> - ❌ 错误写法：
<ruby>汉字<rt>hàn zì</rt></ruby> - 批量处理时别依赖 JS 自动切分空格——中文拼音之间本无空格，应按字符长度严格一一映射
rt默认样式在各浏览器中差异极大
rt 在 Chrome/Firefox 默认是小号、上标、灰色；但在 Safari 中可能不缩放、不居中，甚至渲染成正常字号压在基字上方。这不是 bug，而是规范允许浏览器自由实现渲染逻辑。
- 必须重置 CSS：
ruby rt { font-size: .7em; line-height: 1; position: relative; top: -0.3em; } - iOS Safari 对
ruby的display处理不稳定，避免设display: inline-block或触发 BFC - 若需兼容旧安卓 WebView，可加
rp标签包裹括号（如<rp>(</rp><rt>hàn</rt><rp>)</rp>），但现代项目已可忽略
语义错误比样式难调试
当你发现拼音没显示，第一反应常是查 CSS，但真正卡点往往在 DOM 结构：基字数量 ≠ rt 数量、ruby 嵌套了 span 或换行符、服务端模板意外插入空格……这些都会让浏览器静默丢弃 rt。
- 用浏览器开发者工具检查
ruby元素内是否真有可渲染文本节点（不是空格或注释） - 不要在
ruby外层再套span或div做样式控制——它本身是内联级，嵌套块级会破坏流式布局 - 自动化生成注音时，务必校验输入字符串长度与拼音数组长度是否一致，差一位就全错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
