Ruby标签跨浏览器渲染不一致，需强制设置line-height、重置字号、防断行、组件化生成及导出时降级处理。
ruby 标签不是所有浏览器都默认撑开行高
直接套 <ruby><rb>汉</rb><rt>hàn</rt></ruby>，在 Chrome 和 Safari 看着正常，但在 Firefox 或旧版 Edge 里，<rt></rt> 可能压在文字上、没间距、甚至被裁掉。根本原因是 <rt></rt> 默认是 font-size: 50% 且 line-height 不继承父级，而不同引擎对 ruby 内联布局的 baseline 处理不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制给
<ruby></ruby>设置line-height: 1.8（至少比汉字字号大 0.6），避免拼音贴底或重叠 - 用
ruby { font-size: 1em; }重置基础字号，再单独控制<rt> { font-size: 0.6em; }</rt>，别依赖浏览器默认缩放 - 加
rt { line-height: 1; }，防止 Firefox 把拼音行高拉得过高导致上下留白失控
中文混排英文/数字时 ruby 容易断行错位
比如「第123页」加注音，
<ruby><rb>第</rb><rt>dì</rt></ruby><ruby><rb>123</rb><rt>yī èr sān</rt></ruby><ruby><rb>页</rb><rt>yè</rt></ruby>，在窄容器中可能「123」被拆到下一行，但拼音还挂在上一行末尾，视觉完全脱节。</p> <p>实操建议：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>给整个 ruby 组合加 <code>white-space: nowrap，但只作用于含 ruby 的内联片段，别影响段落换行
<rp>（</rp><rt>...</rt><rp>）</rp> —— 不是为了兼容 IE（早该淘汰了），而是让部分安卓 WebView 在断行时把括号和拼音当整体处理<rb></rb> 里塞空格或全角标点；如需分隔，用零宽空格 替代普通空格Vue/React 里动态生成 ruby 要防 HTML 转义和结构断裂
比如 Vue 模板写 v-html="`<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>`"，一旦 char 是 <div> 或含 <code>&，就会破坏 DOM 结构；React 的 dangerouslySetInnerHTML 同理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用组件封装：写一个
<rubytext :char="c" :pinyin="p"></rubytext>，模板里明确渲染<ruby><rb>{{ char }}</rb><rt>{{ pinyin }}</rt></ruby>，避免字符串拼接 - 若必须用 v-html，先用
DOMPurify.sanitize()过滤非 ruby/rb/rt/rp 标签，再注入 - 注意 React 中
<rt></rt>必须是<ruby></ruby>的直接子元素，不能套在<span></span>里，否则语义失效且样式错乱
打印 PDF 或用 wkhtmltopdf 导出时 ruby 常被忽略
CSS @media print 或 wkhtmltopdf 默认不渲染 <rt></rt>，导出后只剩汉字，拼音全丢。这不是 bug，是多数 headless 渲染器压根没实现 ruby 布局模块。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出前用 JS 遍历所有
<ruby></ruby>，把<rt></rt>内容提取出来，用伪元素::after { content: "hàn"; font-size: 0.6em; }模拟，确保 fallback 可见 - 或者服务端用 Puppeteer 截图时，提前注入一段 CSS：
ruby:has(rt) { position: relative; } rt { position: absolute; top: -0.8em; left: 0; }，强行定位 - 别指望
@supports (display: ruby)能帮上忙 —— wkhtmltopdf 根本不支持这个特性查询
ruby 排版真正难的不是写法，而是它处在“语义正确”和“渲染可靠”之间的裂缝里。你按标准写了，不代表用户真能看到拼音；你加了 hack，又怕哪天浏览器更新就反向 break。最稳的路，是把 ruby 当第一层语义标记，再用 CSS 层叠一层视觉 fallback —— 尤其当目标场景涉及打印、截图、老旧系统时，别省那几行样式。
