ruby行高问题本质是浏览器对内联基线计算不一致，需强制设置ruby{line-height:1.8}、rt{line-height:1;font-size:.6em}、ruby{white-space:nowrap}，并为pdf/打印降级为汉(hàn)格式。
ruby默认撑不开行高，导致拼音压字或重叠
直接写<ruby><rb>汉</rb><rt>hàn</rt></ruby>，在 Firefox 或旧版 Edge 里<rt></rt>常压在汉字上、没间距、甚至被裁掉。根本不是样式漏写了，而是<rt></rt>默认font-size: 50%且line-height不继承父级，各浏览器对 ruby 内联 baseline 的计算逻辑不同。
必须强制给<ruby></ruby>设足够大的line-height：
-
ruby { line-height: 1.8; }——至少比汉字字号大 0.6，防贴底；太小（如 1.2）仍可能压字，太大（如 2.4）又留白失控 - 别依赖段落全局
line-height继承，要单独作用于<ruby></ruby>元素 - 若父容器已设
line-height: 1.5，<ruby></ruby>必须显式覆盖，否则 Safari 可能沿用父级导致拼音上下挤
多共存时行高被拉高，上下留白异常
像<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby>这种写法，Firefox 容易把整个<ruby></ruby>的行高拉得过高，导致上下大片空白——不是<rt></rt>本身高，而是浏览器把多个<rb></rb>的 baseline 堆叠计算后放大了行盒高度。
解决关键是隔离<rt></rt>自身行高影响：
-
rt { line-height: 1; }——禁用<rt></rt>内部行高继承，避免它“撑开”所在行盒 - 同时配
rt { font-size: 0.6em; }，不用百分比（如50%），因 Chrome/Firefox/Safari 对该缩放值的实际像素换算不一致 - 禁用
vertical-align: super或margin-top类 hack，它们会干扰 baseline 定位，让行高更不可控
响应式场景下窄容器中 ruby 换行错位
「第123页」加注音后，在移动端小屏里「123」被拆到下一行，但拼音还挂在上一行末尾，视觉完全脱节。这不是 CSS 没写好，而是<ruby></ruby>作为内联元素，默认允许断行，而<rt></rt>和对应基字不在同一渲染片段里。
核心思路是让每个 ruby 单元“原子化”不折行：
-
ruby { white-space: nowrap; }——只作用于含 ruby 的内联片段，不影响段落整体换行 - 数字/英文部分也必须套
<ruby></ruby>，例如<ruby><rb>123</rb><rt>yī èr sān</rt></ruby>，不能只给汉字加 - 避免
<rb></rb>里出现空格或全角标点；如需分隔，用零宽空格替代
导出 PDF 或打印时 ruby 行高彻底失效
wkhtmltopdf、Puppeteer、系统打印预览，以及 IE11 / Android 4.x WebView，根本不解析<rt></rt>布局模块。它们不是“渲染错”，而是压根不识别 ruby 的行高计算逻辑——结果就是拼音平铺在汉字右侧，或整段消失。
此时 CSS 行高设置毫无意义，必须降级处理：
- 导出前用 JS 遍历所有
<ruby></ruby>，提取<rb></rb>文本和对应<rt></rt>内容，生成汉(hàn)类纯文本并替换 DOM - Vue/React 中不要靠
v-html或dangerouslySetInnerHTML动态注入，优先封装<rubytext></rubytext>组件，在服务端或构建时就完成降级 - 别给
<rt></rt>设visibility: hidden或display: none——降级后拼音直接丢失，用户看不到任何读音
line-height，都只是在不同引擎之间找一个勉强不重叠的交集。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
