必须用CSS重置并精细化控制，否则易出现换行错位、基线偏移、移动端截断；Chrome/Safari/Firefox对ruby渲染差异大，display:ruby等新属性生产环境不可靠，需用传统属性组合实现稳定效果，并注意可访问性语义。
ruby 标签本身语义明确——用于标注东亚文字（如中文、日文）的读音或注释，但浏览器默认渲染极其简陋，且原生支持不均。想靠它做可维护、跨浏览器一致的注音排版，**必须用 CSS 重置并精细化控制**，否则容易出现换行错位、基线偏移、移动端截断等问题。
为什么 ruby 默认样式不能直接用
Chrome 和 Safari 对 ruby 的实现差异大：Chrome 把 rb 当内联元素处理，Safari 则更倾向按块逻辑计算行高；Firefox 默认会压缩 rt 高度，导致注音被裁切。所有浏览器都忽略 ruby 的 font-size 继承链，rt 文字常比预期小一圈。
ruby + display: ruby 的兼容性陷阱
虽然 CSS Ruby Module Level 1 提出了 display: ruby 等新值，但截至 2026 年 8 月，display: ruby、display: ruby-text 在 Chrome 127+、Edge 127+ 中仅部分支持，Firefox 完全不识别，Safari 仍处于实验性前缀状态（-webkit-display: ruby 无效）。所以别在生产环境依赖这些值——它们既无法 fallback，又会污染选择器特异性。
真正可用的 CSS 控制方案
绕过 display 属性，用传统属性组合达成稳定效果：
- 强制重置所有 ruby 内部元素的默认 margin/padding：
ruby, rb, rt, rp { margin: 0; padding: 0; } - 统一字体尺寸与行高：
ruby { font-size: 1em; line-height: 1.5; }，再单独设rt { font-size: 0.6em; line-height: 1; } - 解决基线对齐问题：给
ruby加vertical-align: text-bottom;，避免和周围文字“飘”开 - 防止换行断裂：对
rb使用white-space: nowrap;，对整个ruby加overflow-wrap: normal; - 移动端适配关键：用
@media (max-width: 480px)把rt改为块级显示并置于下方，例如rt { display: block; font-size: 0.7em; margin-top: 0.2em; }
容易被忽略的语义与可访问性细节
ruby 不是装饰性标签，屏幕阅读器会按顺序读出 rb 和 rt。如果手动用 span 模拟 ruby 效果，就彻底丢失了语义。但反过来，若只写 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 而不加 CSS，iOS VoiceOver 可能跳过 rt——因为 Safari 默认把 rt 渲染为 visibility: hidden。所以必须显式设置 rt { visibility: visible; }，哪怕只是覆盖默认值。
立即学习“前端免费学习笔记（深入）”；
