必须嵌套在内才有效，单独使用会被忽略；正确结构为汉字注音，多音字用空格或顿号分隔，老浏览器需降级处理。
ruby 标签必须包裹 rt，不能单独用
直接写 <rt>注音</rt> 是无效的，浏览器会忽略或错误解析。只有当 <rt></rt> 作为 <ruby></ruby> 的子元素出现时，注音才会被正确渲染为上标小字。
常见错误是把 <rt></rt> 当成独立标签来用，比如在段落里零散插入，结果注音完全不显示。正确结构必须是：<ruby><rb>汉字</rb><rt>注音</rt></ruby> 或省略 <rb></rb> 直接 <ruby>汉字<rt>注音</rt></ruby>（此时汉字自动成为基文）。
-
<rb></rb>标签在 HTML5 中已废弃，但部分老文档还在用；现代写法推荐直接把汉字放<ruby></ruby>里 - 一个
<ruby></ruby>可以包含多个<rt></rt>，对应多个汉字，但顺序必须严格匹配 - 如果汉字和注音数量不一致（比如两个汉字只配一个
<rt></rt>），浏览器会尝试平分注音宽度，效果不可靠，应避免
rt 里的文字默认垂直居中且字号缩小，但无法用 font-size 直接改
浏览器对 <rt></rt> 有内置样式：行高压缩、字体缩小（通常为基文字号的 50%–70%）、垂直居中对齐。直接写 style="font-size:12px" 多数情况下不起作用——因为用户代理样式表设置了 font-size: smaller 并带 !important。
真正生效的方式是用 CSS 重置：
ruby rt {
font-size: inherit;
line-height: 1;
}
ruby rt::before {
content: " ";
display: inline-block;
height: 0;
}
不过更稳妥的做法是放弃微调 <rt></rt> 字号，转而控制整个 <ruby></ruby> 的 font-size，让缩放比例保持一致。
- Chrome 和 Firefox 对
<rt></rt>的默认缩放比例不同（Chrome 约 0.6，Firefox 约 0.7），统一设font-size在<ruby></ruby>上能减少差异 - 不要给
<rt></rt>加vertical-align，它本就按 ruby 布局规则垂直定位，手动干预反而错位 - 移动端 Safari 对
<rt></rt>行高处理较松，有时注音会贴到基文上，加line-height: 1.2到<ruby></ruby>更安全
多音字或长注音要用空格或全角顿号分隔，别用逗号
像「长」字读「cháng」或「zhǎng」，写成 <rt>cháng,zhǎng</rt> 会导致逗号也被当成注音字符渲染，视觉拥挤且语义混乱。浏览器不会自动识别逗号分隔逻辑。
正确做法是用空格或全角顿号「、」分隔多个读音：
-
<rt>cháng zhǎng</rt>—— 空格分隔最通用，兼容性好 -
<rt>cháng、zhǎng</rt>—— 全角顿号更符合中文排版习惯，但需确认字体支持 - 避免使用英文逗号、斜杠、括号等符号，它们会被等宽渲染，破坏注音紧凑感
- 如果注音本身含声调符号（如「ā」），确保页面编码为 UTF-8，否则可能显示为方块
IE 和旧版 Edge 完全不支持 ruby，必须降级 fallback
IE 所有版本、Edge 12–17 都无视 <ruby></ruby> 和 <rt></rt>，直接把内容平铺显示（汉字和注音连在一起）。没有 JavaScript 检测或 polyfill 能完美模拟原生 ruby 布局。
最务实的降级方案是用 <span></span> 模拟，并通过 class 区分：
<ruby>汉<rt>hàn</rt></ruby><!-- 降级写法 --><span class="ruby">汉<span class="rt">hàn</span></span>
再配合 CSS 控制 .rt 的位置和大小。注意：这种写法在现代浏览器里会和原生 <ruby></ruby> 共存，需用属性选择器隐藏降级内容：
@supports (display: ruby) {
.ruby .rt { display: none; }
.ruby { display: ruby; }
}
- 别依赖
document.createElement('ruby')检测，IE11 返回 true 但实际不渲染 - 第三方 polyfill（如 ruby-polyfill）仅处理简单单字场景，复杂嵌套或换行易出错
- 如果项目明确不支持 IE，可跳过 fallback，但务必确认客户真实终端环境
注音排版真正麻烦的不是语法，而是基文和注音的字数对齐、多音分隔的语义表达、以及老浏览器里那个看不见的 <rt></rt>。写完最好在 Chrome、Firefox、Safari 和 Edge（最新版）各打开一次，盯着每个字看两秒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
