ruby标签中rt被截断的主因是父容器line-height过小，需为ruby设line-height:1.8、rt设1.2并禁用vertical-align:super；多字注音须一一对应单字ruby结构；Safari不支持ruby-position:under；自动生成时须校验汉字与拼音长度一致且过滤不可见字符。
ruby标签默认line-height导致rt被截断
多数人在 Safari 或 Firefox 中发现 rt 内容顶部被砍掉，不是 CSS 没生效，而是父容器（比如段落或 div）设了 line-height: 1 或过小值，而 rt 的基线位置依赖于其所在行框的可用高度。浏览器把 rt 渲染在基字上方，但没留够垂直空间，直接裁剪。
必须显式扩大包裹容器的行高空间：
-
ruby元素自身设line-height: 1.8（不能靠继承，要直接作用于ruby） -
rt设line-height: 1.2，避免它内部再撑高 - 禁用
vertical-align: super——它会让rt相对整行偏移，而非相对基字
多字并排时拼音错位的根本原因
写成 <ruby><rb>苹果</rb><rt>píng guǒ</rt></ruby> 看似省事，实际是布局灾难：一个 <rb></rb> 包两个汉字，<rt></rt> 就只能整体上浮，无法分别对齐“苹”和“果”。换行、缩放、字体替换后极易脱钩。
正确做法是严格一一对应：
立即学习“前端免费学习笔记（深入）”；
- 每个汉字单独套一层
ruby：<ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby> - 混排数字/英文时，只给汉字加
ruby，其余字符原样保留，不参与注音结构 - 用
white-space: nowrap包裹整组ruby，防止换行断裂，但不要设在段落级
Safari 对 ruby-position: under 的忽略问题
想让拼音显示在汉字下方？别白费劲。Safari 只支持 ruby-position: over（即默认上方），且不响应 under 值。这不是 bug，是规范允许的实现差异。Chrome 和 Firefox 虽支持 under，但语义上 ruby 本就为「上标注解」设计，强行下置会破坏可访问性（屏幕阅读器默认按上标逻辑播报）。
如果业务强需下方标注，有两个务实选择：
- 放弃
ruby，改用span+aria-label+ 定位样式模拟，兼顾 TTS 朗读 - 用 JS 库（如
pinyin-pro）生成带data-pinyin的结构，再通过 CSS 控制显示位置，不依赖原生ruby渲染逻辑
动态生成时最易漏的结构完整性检查
用 Python 或 JS 自动生成拼音 HTML 时，90% 的失败源于结构缺失。常见错误包括：
- 漏写
<rb></rb>标签——<ruby>汉<rt>hàn</rt></ruby>在 Firefox 中完全不触发注音渲染 - 拼音数组与汉字数组长度不一致（比如遇到 emoji、全角空格、零宽字符），导致某字无
rt或多出空rt - 未过滤不可见字符（如
\u200b零宽空格），使rb内容实际包含非可视字符，破坏一一对应
建议生成前做校验：len(chars) == len(pinyins)，且每个 char 是 Unicode 中文区块字符（\u4e00-\u9fff）或常用标点；非目标字符直接跳过，不包裹 ruby。
真正麻烦的从来不是写对一行 ruby，而是让整段文本在所有浏览器里都保持基字与拼音的像素级对齐——这需要结构严谨、样式克制、生成鲁棒，三者缺一不可。
