ruby元素在grid中错位是因inline特性导致行高膨胀，解决需用flex布局、重置line-height、避免auto行高，并注意grid-area仅作用于直接子元素及safari兼容性问题。
ruby元素在grid容器中会自动换行错位
因为ruby是inline元素，其内部rt的上标高度会撑大行高，当网格轨道高度固定（比如grid-template-rows: 100px）或内容宽度受限时，浏览器优先保障基字不折行，导致rt溢出、压扁甚至挤到下一行。这不是bug，而是inline元素在受限网格单元中的固有行为。
解决方法不是强行用white-space: nowrap——那会让整个单元格横向溢出。更稳妥的是：
- 给包含
ruby的网格项设display: inline-flex或display: flex，把ruby转为flex子项，脱离行高影响 - 若必须保持inline流，可在父网格项上加
line-height: 1.2并配合font-size: 0再重设子元素字号，压制默认行高放大 - 避免在
grid-template-rows中用auto配ruby，改用minmax(1em, max-content)让轨道能弹性响应注音高度
grid-area无法直接作用于ruby内部的rb或rt
grid-area只对**网格容器的直接子元素**生效。而ruby里的rb和rt是ruby的后代，不是网格项。写成<ruby><rb style="grid-area: main">汉</rb><rt>hàn</rt></ruby>完全无效，浏览器会忽略该样式。
正确做法分两层控制：
- 把整个
ruby元素作为网格项，用grid-area、grid-row等定位到目标区域 - 在
ruby内部，用ruby-position: over和ruby-align: center微调rt相对于基字的位置，而不是试图用grid控制单个rt - 若需多个
ruby横向对齐（如一排带拼音的标题），用display: flex包裹它们，并设justify-content: space-between，别依赖grid-column线号硬对齐
图像与ruby共存于同一网格项时的尺寸冲突
当<img>和<ruby></ruby>同属一个网格项（比如都放在main区域），img默认不缩放，ruby又自带行高膨胀，容易互相挤压：图片撑开轨道，ruby被压缩变形；或ruby拉高行高，图片下方留白过大。
关键约束必须同时满足：
-
img必须带max-width: 100%; height: auto;，否则它不参与网格轨道的弹性收缩 -
ruby需重置默认样式：ruby { line-height: 1; }+rt { font-size: 0.65em; ruby-position: over; ruby-align: center; } - 若两者需垂直居中对齐，不要给网格项设
align-items: center——这会让ruby的基线偏移不可控；改用display: flex; align-items: center;包裹二者，再把该flex容器作为网格项
旧版Safari中ruby在grid里渲染异常的兼容处理
iOS 15.4及更早版本的Safari对连续ruby在display: grid容器中的间距计算有缺陷：相邻ruby之间空白过大，且rt垂直位置随机偏移。这不是CSS没写对，而是渲染引擎未正确处理inline元素在grid track中的baseline对齐逻辑。
绕过方案有限但有效：
- 用
@supports (display: grid) and (ruby-position: over)做特性检测，对不支持的UA降级为display: block或display: flex布局 - 避免在grid项内直接写多个并列
ruby，改用<span class="ruby-group"><ruby>...</ruby><ruby>...</ruby></span>，再对该span设display: flex; gap: 0.2em; - 不用
grid-template-areas定义含ruby的区域，改用grid-row/grid-column线号定位，减少语义解析负担
真正麻烦的不是写法，而是屏幕阅读器在grid+ruby嵌套时可能跳读注音——必须确保每个ruby独立、语义完整，不能靠CSS视觉合并来“假装”是一个词。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
