默认ruby和rt样式不能直接使用，因浏览器渲染逻辑不统一：Chrome将rt渲染为小号上标居中，Firefox存在垂直位置偏移和行高异常，Safari常忽略对齐致拼音贴顶或被裁剪；规范允许引擎自由实现baseline对齐，故必须显式声明display: ruby、固定rt字体大小（如12px）、设置line-height协同、禁用vertical-align: super，并加white-space: nowrap防换行断裂。
为什么默认的ruby和rt样式不能直接用
浏览器对ruby的渲染逻辑不统一：Chrome 把 rt 渲染成小号上标、居中；Firefox 可能压低位置、line-height 计算异常；Safari 则常忽略垂直对齐，导致拼音贴着汉字顶部甚至被裁剪。这不是 bug，而是规范允许各引擎自由实现 baseline 对齐方式——所以「不加 CSS 就能跨端一致」根本不存在。
ruby必须显式声明display: ruby
部分 Safari 版本（尤其是 iOS 16.4 之前）无法自动识别未声明 display 的 ruby 元素，导致 rt 被当普通内联文本流排版。FireFox 和 Edge 也对 display 推断更严格。
- 必须写：
ruby { display: ruby; }，不能依赖浏览器默认 - 别加
display: inline或display: block——会彻底破坏 ruby 布局语义 - 如果用了 CSS-in-JS 或 scoped style，确认该规则没被局部作用域隔离掉
rt的字体与行高要固定像素控制
用 font-size: 0.7em 这类相对值，在不同字号上下文里缩放结果不可控；移动端缩放、系统字体设置变更后，rt 容易偏移或挤进基字里。
- 推荐：
rt { font-size: 12px; line-height: 1.2; } - 配合：
ruby { line-height: 1.8; }留出足够垂直空间，防止拼音被截断 - 禁用
vertical-align: super——它按行高基准偏移，不是按基字中心，缩放后必错位 - 加
ruby-position: over;显式声明位置，覆盖浏览器默认 fallback 行为
防换行断裂的关键是white-space: nowrap作用范围
像「第ruby123ruby页」这种结构，在窄屏下「123」可能折到下一行，但拼音还挂在上一行末尾，视觉完全脱节。
立即学习“前端免费学习笔记（深入）”；
- 只给含
ruby的内联片段加：ruby + ruby, ruby ~ ruby { white-space: nowrap; }或用 wrapper 元素包住整组 - 别在
p或div上全局设white-space: nowrap，否则正文无法换行 - 数字/英文混排时，
rb内容若含空格（如“第 一 百”），要用零宽空格替代，否则nowrap失效
<rt></rt>——这会让屏幕阅读器读作「空白注音」，且部分安卓 WebView 会因此触发 layout 异常。空值必须跳过整个 rt 标签。 
