ruby标签基本结构必须包含rt才能生效，现代浏览器均原生支持，但ie完全不支持；需严格遵循字音结构，rp仅用于老浏览器括号降级。
ruby标签的基本结构和浏览器兼容性
ruby 是 HTML5 原生支持的语义化标签，专为汉字注音、训读或辅助释义设计。它本身不渲染样式，依赖浏览器默认行为：现代 Chrome、Firefox、Safari（macOS/iOS）、Edge 均能正确显示 ruby/rt 组合；但 IE 完全不支持，Android WebView 旧版本（如 Android 4.4）可能忽略 rt 或错位。
- 必须成对使用：
ruby包裹被注释文字，rt放在内部作为注音/解释 - 不要嵌套其他行内元素到
rt中（比如span或strong），否则部分 Safari 版本会丢弃渲染 -
rp标签用于兼容无ruby支持的浏览器，但实际中极少需要——它只在rt不被识别时显示括号，现在基本可省略
<ruby>骉<rt>biāo</rt></ruby>
生僻字注音时 rt 内容写法要点
rt 里填拼音还是注释，取决于用途。面向中文母语者教学场景，优先用带声调的规范拼音；若目标用户含方言区或儿童，可加轻声标记（如“了啦”）；若解释字义（如古籍阅读），则直接写释义短语。
- 拼音不要加空格或连字符（
shuǐ guǒ错，shuǐguǒ对） - 多音字需结合上下文选音，
ruby本身不提供切换逻辑，得靠 JS 动态替换或服务端判断 - 避免在
rt中混用繁体字与简体拼音（如“裡”），易引发排版偏移，建议统一用简体字+对应拼音
常见错误现象：rt 文字比主字小很多、位置偏高、或整段挤在一起——本质是 CSS 重置了 ruby 的默认 display 行为，应避免给 ruby 设 font-size 或 line-height。
CSS 微调 ruby 排版的关键属性
浏览器对 ruby 的默认样式较保守，但可通过有限的 CSS 控制垂直间距和字体大小。重点可用属性只有三个：ruby-align、ruby-position、font-size（仅作用于 rt）。
-
ruby-position: over（默认值）让注音在上方；设为under可用于日文训读（下方注假名），但中文场景慎用 -
ruby-align: center可让注音水平居中对齐主字（尤其多字组合如“魑魅魍魉chī mèi wǎng liǎng”），否则默认左对齐易错位 - 不要对
ruby设置display: inline-block，会破坏内联流布局，导致换行异常
ruby { ruby-align: center; }
rt { font-size: 0.6em; }
服务端生成 ruby 时容易漏掉的边界情况
批量处理古籍或词典数据时，常从 CSV 或 JSON 注音字段自动插入 ruby。这时容易忽略：
- 字符编码问题：生僻字若未用 UTF-8 存储，
ruby渲染会变成方框或乱码（检查 HTTPContent-Type是否含charset=utf-8） - 空格与换行符混入
rt：如 JSON 字段带尾随空格，“biāo ”会导致注音后多一个空白，视觉上断开 - 含 HTML 实体的字：如“?”（U+20BB7）需确保页面声明了
<meta charset="UTF-8">，否则rt可能无法对齐该字 - 单字重复出现但读音不同：比如“行”在“银行”和“行走”中读音不同，静态
ruby无法区分，必须结合上下文做条件渲染
最常被忽略的是：当生僻字本身是零宽字符（如某些异体字或组合符）时，ruby 会失效——此时得改用 aria-label + CSS 伪元素模拟，或降级为普通 tooltip。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
