现代浏览器不渲染上标拼音的根本原因是缺失rb标签导致语义断裂。必须为每个注音字符（含汉字、数字、标点、emoji）显式包裹rb，否则rt失去依附对象，屏幕阅读器跳过、css失效、多字注音错位。
没写 rb 标签，现代浏览器根本不会渲染上标拼音——它会把 rt 当成普通内联文本平铺在基字后面，不是“显示异常”，而是语义缺失导致的降级行为。
为什么写了 ruby 和 rt 却不显示拼音
Chrome 120+、Firefox 125+、Safari 17+ 已将 rb 视为强制语义锚点。只写 <ruby>汉<rt>hàn</rt></ruby> 会被解析为两个独立文本节点：“汉”和“hàn”，中间无绑定关系。
-
rb缺失时，rt失去依附对象，浏览器跳过上标逻辑 - 屏幕阅读器无法建立“字→音”映射，直接跳过
rt内容 - CSS 中对
rt的样式（如font-size）可能被忽略或部分失效 - 多字共用一个
ruby时，即使写了rt，也仅第一个字能关联上（其余rt被丢弃）
rb 必须逐字包裹且不可省略
每个被注音字符（含汉字、数字、英文字母、标点、emoji）都必须显式包裹在 rb 中，不能靠空格或换行分隔。
- 正确：
<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby> - 错误：
<ruby><rb>北京</rb><rt>běi jīng</rt></ruby>（基字单位错误，声调错位） - 错误：
<ruby>第<rt>dì</rt>123<rt>yī èr sān</rt></ruby>（数字未包rb，结构断裂） - 动态生成时，若原始字符串含
&或，需先 HTML 转义，否则 <code>rb标签提前闭合
rp 不是可选装饰，但现代项目常可省略
rp 的唯一合法位置是 rt 内部开头或结尾，且内容只能是纯括号字符（(、)、[、]），多一个空格即失效。
- Chrome 会渲染
rp导致显示 “汉(hàn)”，Safari 则按规范隐藏——同一段 HTML 在不同浏览器视觉不一致 - 目标环境明确为新版 Chrome/Firefox/Safari 时，可完全省略
rp，结构更干净：<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 需兼容 IE11 或旧安卓 WebView 时，必须写成：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - 服务端渲染建议按 UA 判断：Blink/WebKit 新内核 UA 下直接不输出
rp，避免 CSS 强制隐藏带来的维护负担
rt 字号和行高必须用固定值控制
用 font-size: 70% 或 0.6em 渲染 rt，在 Safari 和 Firefox 中基准计算不一致，极易导致注音偏高、截断或与基字重叠。
- 推荐写法：
rt { font-size: 12px; line-height: 1; vertical-align: text-top; } - 禁用
vertical-align: super——它基于行高而非基字定位，响应式缩放时错位加剧 - 不要给
ruby设display: inline-block或width，会破坏内建的 ruby 流式对齐逻辑 - 移动端竖排场景下，加
ruby { ruby-position: over; }显式声明位置，防止rt跑到右侧
真正容易被忽略的不是怎么写对，而是所有非汉字字符（包括空格、换行符、emoji、全角标点）都必须参与 rb 包裹；漏掉任意一个，整段注音结构就从那个位置开始断裂——这不是样式问题，是 DOM 解析层面的失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
