必须用<rb>包汉字、<rt>放拼音、<ruby>做容器，三者缺一不可；漏<rb>或拼音在<ruby>外则浏览器当普通文本渲染；<ruby>汉<rt>hàn</rt></ruby>不显拼音非bug，因规范要求显式<rb>标基字，Firefox/新版Edge严格遵循，Chrome/Safari宽容处理。
必须用 <rb> 包汉字、<rt> 放拼音、<ruby> 做容器，三者缺一不可；漏掉 <rb> 或把拼音写在 <ruby> 外面，浏览器直接当普通文本渲染。
为什么 <ruby>汉<rt>hàn</rt></ruby> 在部分浏览器里不显示拼音
这不是 bug，是规范行为：<ruby> 标签本身不定义“被注音内容”，必须显式用 <rb> 标出基字。Chrome 和 Safari 会宽容处理（自动把 <ruby> 内非 <rt> 的文本当 <rb>），但 Firefox 和新版 Edge 严格遵循标准，没 <rb> 就不触发注音排版逻辑。
- 错误写法：
<ruby>汉<rt>hàn</rt></ruby>—— Firefox 中拼音平铺在汉字后，无上标效果 - 正确写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby>—— 所有现代浏览器均识别为注音结构 - 若需兼容旧环境，加
<rp>：<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>，IE 会显示“汉(hàn)”
多字文本怎么避免拼音和字错位
核心原则：一个汉字一套 <rb>+<rt>，禁止跨字共用 <rt>。哪怕词组如“苹果”语义完整，也优先按字拆分——否则换行、缩放、字体替换时极易脱钩。
- 安全做法：
<ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby> - 风险做法：
<ruby><rb>苹果</rb><rt>píng guǒ</rt></ruby>—— “píng guǒ”可能整体上浮，无法对齐单字 - 混排数字/英文时，
<rb>里只放需注音字符，其余原样保留：<ruby><rb>第</rb><rt>dì</rt></ruby>123<ruby><rb>页</rb><rt>yè</rt></ruby>
注音样式总被裁剪或挤在一起怎么办
根本原因是浏览器对 <rt> 的默认 line-height 和 font-size 不一致，尤其在父容器设了 line-height: 1 时，<rt> 顶部常被截断。
立即学习“前端免费学习笔记（深入）”；
- 强制设置：
<ruby> { line-height: 1.8; font-size: 1em; }—— 确保基线有足够空间 -
<rt> { font-size: 0.6em; line-height: 1.2; }—— 避免依赖浏览器默认缩放（Firefox 默认 50%，Safari 50%～60%） - 防换行断裂：
<ruby> { white-space: nowrap; }，但仅作用于含<ruby>的内联片段，别污染段落 - 移动端 Safari 忽略
ruby-position: under，只支持over（即上方），无需额外设置
动态生成时最常踩的三个坑
用 Python 的 pypinyin 或 JS 的 pinyin-pro 生成 HTML 很方便，但结构错一位，整段注音就失效。
- 拼音与汉字数量不一致：遇到 emoji、组合字符（如「ā」）、全角标点时，
pypinyin.lazy_pinyin()按 Unicode 字符切分，只要输入是 UTF-8 字符串，就可放心enumerate()对齐；但若用了errors='ignore'，英文字母和数字会丢拼音，导致<rb>和<rt>数量不等 - HTML 转义破坏结构：Vue/React 中用
v-html或dangerouslySetInnerHTML注入字符串时，若原始文本含&、<，会闭合标签；必须先过滤或改用组件封装：<RubyText :char="c" :pinyin="p" /> - 导出 PDF 时拼音消失：wkhtmltopdf 和多数打印样式表不解析
<rt>，导出后只剩汉字；需 JS 预处理，把每个<rt>内容提取出来，用::after { content: "hàn" }注入伪元素
真正难的不是写对结构，而是让拼音在换行、缩放、不同字体、PDF 导出、屏幕阅读器下都保持可读且语义正确——<rb> 和 <rt> 必须严格一一对应，任何“差不多”的拼接都会在某个环节翻车。
