ruby 在栅格中“没对齐”并非失效，而是因默认 inline 显示、注音宽度浮动、基线偏移及浏览器 line-height 计算差异所致；需显式设 inline-block、固定行高、min-height 和 rem 字号，并禁用相对缩放与 transform 缩放。

ruby 标签本身不参与栅格布局计算，它只是内联级注音容器，在 grid 或 flex 容器中默认按内容宽度占用轨道，不会撑开列、也不会触发换行或重排——这点常被误认为“失效”或“错位”。

为什么 ruby 在栅格里看起来“没对齐”

这不是 ruby 的问题，而是它和栅格轨道之间缺乏尺寸契约：

• ruby 默认 display: inline，在 grid 项中若未设 width 或 min-width，其宽度由内部 rb + rt 内容决定，而注音文字（如日文假名）渲染宽度浮动，尤其在不同字体、缩放比下差异明显
• 当 ruby 放在卡片标题里，而卡片又用了 flex: 1 或 min-height 锚定高度时，ruby 的基线会随注音高度上浮，导致整行文本视觉下沉
• 部分浏览器（如 Safari 16.6）对 ruby 的 line-height 计算不一致，叠加 gap 后，上下行卡片的 rt 区域可能错开 0.3px，高 DPR 下肉眼可见虚边

ruby 要进栅格，必须显式约束尺寸

不能依赖它“自动适配”，得把它当成一个需要手动立住的内联块：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 给包裹 ruby 的父元素（比如 h3.card-title）加 display: inline-block 或 display: block，再设 width: 100% 和 box-sizing: border-box
• ruby { line-height: 1.4; } —— 强制统一行高，避免因注音高度波动拉伸轨道
• 若需等高对齐，给 ruby 外层加 min-height: 2em，且确保所有同类标题都用相同 min-height 值
• 禁用 ruby rt { font-size: 0.7em } 这类相对缩放，改用固定 rem（如 0.625rem），防止缩放时注音区域像素溢出

响应式断点里 ruby 最容易翻车的场景

不是小屏列数变少，而是字体缩放与 DPR 叠加后，注音文字开始“挤出”轨道：

• 系统缩放设为 125% 时，rt 文字物理像素变多，但 grid-gap 按 rem 计算后仍为整数，造成下方轨道被顶高
• 移动端横屏（DPR=2）下，若 ruby rb 内含长汉字词组，渲染宽度可能突破预设的 minmax(280px, 1fr) 下限，触发列数减少，但视觉上只看到标题“突然跳到下一行”
• 用 transform: scale(0.9) 做全局缩放适配时，ruby 的 rt 会模糊，且基线偏移无法用 vertical-align 补偿

真正难的不是让 ruby 显示出来，而是让它在任意 DPR、任意缩放、任意字体加载状态下，都不破坏栅格的轨道对齐——这要求你放弃“内容自适应”的幻想，对注音区域做像素级尺寸收口。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！