ruby标签必须显式包含rb和rt才能正确渲染拼音，缺一不可；多字注音需逐字拆分，且需css重置与降级处理。
直接说结论：ruby 标签本身不渲染拼音，必须配 rt，且现代项目中还应显式加 rb；漏掉任一环节，注音就失效——这不是兼容性问题，是规范层面的结构缺失。
为什么ruby里写了rt却没显示拼音
常见错误是写成 <ruby>汉<rt>hàn</rt></ruby>。Chrome 和 Safari 会宽容处理，自动把“汉”当基字；但 Firefox、Edge（新版）和部分 Android WebView 严格按标准执行：没有 rb，就不识别哪个字被注音，rt 被当成普通内联文本平铺在后面。
- 正确结构只有一种：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> -
rb必须是ruby的直接子元素，不能被span、em等包裹 - 如果
rt前有空格、换行或注释，也会中断关联，导致失效 - 动态生成时注意引号转义：Ruby 或 JS 拼接字符串时，别让
rb或rt标签名被截断或大小写错误（如RT或rtt）
多字注音必须逐字拆开，不能合并
写成 <ruby><rb>苹果</rb><rt>píng guǒ</rt></ruby> 表面能出效果，但实际风险极高：换行时拼音整体上浮、字体缩放后对齐失控、屏幕阅读器无法分别播报“苹”和“果”。
- 安全做法是每个汉字独立套一层：
<ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby> - 地名、人名、多音字同理：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 混排数字/英文时，只给汉字加
rb：<ruby><rb>第</rb><rt>dì</rt></ruby>123<ruby><rb>页</rb><rt>yè</rt></ruby> - 别用零宽空格或
CSS 必须重置，不能依赖浏览器默认样式
rt 在 Chrome 中默认是灰色小号上标，Safari 可能不缩放、Firefox 可能压底，这些不是 bug，而是规范允许各引擎自由实现 baseline 对齐逻辑。
- 关键样式必须加：
ruby { line-height: 1.8; }（撑开垂直空间，防顶部裁剪） -
rt { font-size: 0.6em; line-height: 1; }（禁用浏览器默认缩放干扰） - 加
ruby { display: ruby; }强制 Safari 识别容器类型（Firefox/Chrome 也认） - 避免用
vertical-align: super或position: relative微调——字体变化或缩放后极易偏移 - 移动端窄屏下加
ruby { white-space: nowrap; }防拼音折行，但别设在段落级父容器上
导出 PDF 或旧环境降级时，ruby 会直接消失
wkhtmltopdf、Puppeteer、IE11、Android 4.x WebView 等根本不解析 ruby 布局模块——不是渲染差，是压根没实现。
- 导出前需用 JS 遍历所有
ruby，生成降级文本如汉(hàn)并替换 DOM - 邮件模板或 CMS 输出中，
rt标签常被过滤，务必检查最终 HTML 源码是否完整 - 若需无障碍支持（TTS 朗读），
ruby不够可靠；建议配合aria-label或用 JS 库（如pinyin-pro）生成双轨结构 - 自动拼音库（如
pypinyin）返回的是数组，记得用.join(' ')拼接，别直接插进rt
真正容易被忽略的，是 rb 的显式声明——它不是可选语法糖，而是现代跨浏览器一致渲染的刚性前提。结构错一位，整段注音就退化成纯文本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
