Ruby标签默认不显示拼音需满足合法结构：被注音文字→紧接rt→可选rp；font-size用固定像素值如12px并配line-height:1；注音防截断需设white-space:nowrap和ruby-position:over；多字注音须逐字包裹ruby。
ruby标签默认不显示拼音？先确认结构是否合法
浏览器只对符合规范的 ruby 结构触发注音渲染逻辑，不是所有带 rt 的写法都有效。常见失效原因包括：rt 没紧跟在被注音文字后、ruby 内混入换行或空格、漏掉 rt 或误把拼音塞进 ruby 开始标签和文字之间。
必须保证 DOM 顺序是：被注音文字（可选 rb）→ 紧跟 rt → 可选 rp。例如：<ruby>汉<rt>hàn</rt></ruby> 是有效的；<ruby><rt>hàn</rt>汉</ruby> 则完全不显示拼音。
font-size设百分比为什么无效？用固定像素值
不同浏览器对 rt 的默认字号缩放逻辑不一致，用 font-size: 70% 或 0.5em 容易导致偏移、截断甚至消失。这不是 bug，而是规范未强制统一计算方式的结果。
可靠做法是给 rt 设固定像素字号，并配合行高控制：
立即学习“前端免费学习笔记（深入）”；
rt { font-size: 12px; line-height: 1; }- 同时确保父容器有足够行高，比如
line-height: 1.8;防止上标拼音被挤出可视区 - 避免用
vertical-align调整，多数情况下反而破坏对齐
注音被截断或换行错位？white-space 和 ruby-position 要配对设
默认 ruby 是 inline 元素，其内部注音高度会撑开行高；当容器宽度不足时，浏览器优先保持基字不断行，导致 rt 溢出或压扁。
两个关键 CSS 必须一起加：
-
ruby { white-space: nowrap; }—— 防止字-音对被意外拆到两行 -
ruby { ruby-position: over; }—— 显式声明横排时注音在上方（避免 Safari 竖排 fallback 干扰） - 禁用
display: inline-block或float，否则语义断裂，屏幕阅读器无法识别注音关系
多字连续注音样式不均？别偷懒，每个字单独套 ruby
试图用一个 ruby 包裹“中国”再配一个 rt（如 <ruby>中国<rt>zhōng guó</rt></ruby>）看似省事，但实际会导致：
- Chrome/Firefox 多数只给最后一个字（“国”）标音 CSS 无法单独选中“中”对应的
- TTS 语音合成可能把 “zhōng guó” 当作单音节读错
rt 做高亮或颜色调整
正确做法是逐字拆开：<ruby>中<rt>zhōng</rt></ruby><ruby>国<rt>guó</rt></ruby>。虽然 HTML 看着啰嗦，但这是唯一能保证定位精准、语义完整、无障碍可用的方式。
