标签必须包含子元素才能显示注音，否则整个ruby块被忽略；需直接嵌套、不可隔层；多字须逐字独立ruby包裹；仅能位于内且内容仅为括号字符；推荐用固定像素设置字体大小并移除多余空格。
ruby标签必须配rt，否则注音完全不显示
只写<ruby>汉</ruby>是无效的——浏览器会忽略整个<ruby></ruby>块，文字照常显示，但拼音彻底消失。原因在于<rt></rt>是必需子元素，不是可选装饰。<rt></rt>必须直接嵌套在<ruby></ruby>内，不能隔层（比如<ruby><span><rt>hàn</rt></span></ruby>就失效）。
一个<ruby></ruby>可含多个基字+多个<rt></rt>，例如：<ruby>中<rt>zhōng</rt>国<rt>guó</rt></ruby>。服务端渲染时若拼音为空，应跳过整个<rt></rt>，而不是输出<rt></rt>——屏幕阅读器可能读作“空白注音”。
rp标签只能嵌在rt内部，且内容必须是纯括号字符
<rp></rp>不是“加括号就完事”，它有硬性位置和内容约束：只能出现在<rt></rt>的开头或结尾，且里面只能是(、)、[、]等纯括号字符，多一个空格或字母都会导致 fallback 失效。
- ✅ 正确：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - ❌ 错误：
<rp>(</rp><rt>hàn</rt><rp>)</rp>（<rp></rp>在<rt></rt>外，被忽略） - ❌ 错误：
<rt><rp>( </rp>hàn</rt>（<rp></rp>含空格，部分浏览器不触发 fallback）
Chrome 会渲染<rp></rp>导致括号可见，Safari 则隐藏它。生产环境推荐服务端按 UA 移除<rp></rp>，或用 CSS 强制隐藏：rp { display: none; }。
多字注音必须独立嵌套，不能共用rt
常见错误是把多个汉字塞进一个<ruby></ruby>再配一个<rt></rt>，比如：<ruby>汉字<rt>hàn zì</rt></ruby>。这会导致 Safari 渲染错位（对空格和换行更敏感），且语义不准确——每个汉字应有对应拼音。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
正确写法是逐字嵌套：<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>。不能嵌套另一个<ruby></ruby>，也不能跨字共享<rt></rt>。
Chrome/Firefox/Safari/Edge 均原生支持，IE8 及更早版本不支持，此时<rp></rp> fallback 才起作用——但前提是结构合法，否则连括号都不显示。
样式控制要避开font-size百分比值
浏览器默认把<rt></rt>渲染在基文字上方（横排）或右方（竖排），字体小、行高紧。但不能用font-size: 70%这类百分比值可靠缩放——不同浏览器对<rt></rt>的默认字号计算逻辑不一致，容易导致偏移或截断。
推荐做法：
- 用固定像素值控制大小，如
rt { font-size: 12px; } - 用
line-height微调垂直居中，避免与基字重叠 - 慎用
vertical-align，部分旧 Safari 对<rt></rt>的该属性支持不稳定 - 若需响应式缩放，建议用 CSS 自定义属性 + JS 动态计算，而非依赖继承比例
真正容易被忽略的是：即使结构完全正确，<rt></rt>在 Safari 中对换行符和多余空格极其敏感。上线前务必检查 HTML 是否为单行紧凑格式，否则注音可能错位或折行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
