ruby 默认 display 为 inline，但启用专用布局算法，不可随意设置 width/height/vertical-align；line-height 必须显式控制；white-space: nowrap 不能完全防断行；pdf/打印时需 js 降级为括号格式。
ruby 默认是 inline 元素，但渲染行为不等于普通行内标签
ruby 在 CSS 中默认 display 值是 inline，但它不是“普通行内元素”——浏览器会为其启用专门的 ruby 布局算法，处理基字与注音的对齐逻辑。这意味着你不能像对待 span 那样随意设 width、height 或 vertical-align，否则会破坏注音定位。
常见误操作包括：
- 给
ruby设display: inline-block：导致 Safari 渲染错位，Firefox 忽略rt对齐 - 用
vertical-align: super替代原生上标逻辑：拼音脱离基字 baseline，缩放后偏移加剧 - 在
ruby外层套div并设text-align: center：只居中容器，不修正rt相对于单字的位置
line-height 是最常被忽略的排版破坏点
ruby 的行高不继承父级，且各浏览器对 rt 的 baseline 计算方式不同。Chrome 可能让拼音紧贴汉字顶部，Firefox 却压在字底，Safari 更可能因 line-height 过大导致上下留白失控。
必须显式控制：
- 给
ruby设line-height: 1.8（至少比汉字字号大 0.6） - 给
rt设line-height: 1，禁用其默认拉伸 - 避免用
line-height: normal或不设——这等于把排版权交给不可控的 UA 样式
white-space: nowrap 不是万能防断行方案
中文混排数字或英文时（如「第123页」），即使给整个 ruby 组合加 white-space: nowrap，部分安卓 WebView 仍可能在数字中间断行，造成拼音与基字视觉脱节。
更稳妥的做法：
- 对含数字/英文的
rb，补<rp>(</rp><rt>...</rt><rp>)</rp>，利用括号包裹提升断行原子性 - 用零宽空格
替代普通空格分隔多音节拼音（如yīèrsān） - 避免在
rb内写全角标点或顿号——它们会被当作文本节点参与断行计算
导出 PDF 或打印时 ruby 结构直接消失
wkhtmltopdf、Puppeteer、系统打印预览等工具多数未实现 ruby 布局模块，遇到 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 会直接跳过 rt，只留下裸汉字。
这不是样式问题，而是引擎层面缺失支持。临时应对需在导出前用 JS 降级：
- 遍历所有
ruby，提取rb文本和对应rt内容，拼成汉(hàn)格式 - 替换 DOM 后再触发导出，而非依赖 CSS @media print
- 不要指望
@supports (display: ruby)检测能覆盖导出场景——它只作用于渲染阶段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
