根因是rt未约束font-size和line-height导致浏览器按默认逻辑处理拼音；需统一设ruby的line-height为1.2、rt为1，禁用百分比字号，多音字须拆分rb/rt对，并在iOS Safari contenteditable中加transform: translateZ(0)。

ruby 标签导致行高异常的根因

不是 ruby 本身撑高了行距，而是未约束 rt 的 font-size 和 line-height，让浏览器按默认排版逻辑把拼音当“普通内联文本”处理——结果就是拼音上下留白过大、基线浮动、多音字叠加时行高被反复拉伸。

必须同步设置 ruby 与 rt 的 line-height

ruby-align: center 只管水平对齐，垂直方向全靠 line-height 控制。若 ruby 继承了父段落的 line-height: 1.8，而 rt 没设 line-height: 1，拼音就会被上下挤压变形，甚至和下一行文字重叠。

• ruby 元素统一设 line-height: 1.2（不要用 normal 或百分比）
• rt 必须显式设 line-height: 1，否则其自身行高会参与外层计算
• 避免在 ruby 上设 padding 或 margin，它们会额外增加视觉高度

多音字场景下 font-size 要用固定比例值

写 font-size: 50% 看似省事，但 Safari 和部分安卓 WebView 会把它解析为“相对于父元素当前字号的 50%”，而父元素字号可能来自继承链中某处动态变化的 rem 或 em，导致拼音忽大忽小、行高跳变。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• rt 固定用 font-size: 0.6em（不是 50%，也不是 10px）
• rb 不要设 font-size，让它完全继承上下文，保证基字尺寸稳定
• 多音字如「长」需拆成两个 长cháng长zhǎng，不能塞进一个 rt，否则拼音宽度失控，触发换行或溢出

iOS Safari contenteditable 中的隐藏陷阱

在可编辑区域（如富文本编辑器、打卡表单）里用 ruby 标注多音字，iOS Safari 17.4+ 会出现拼音垂直偏移、行高突增——这不是 CSS 错误，是渲染管线未触发 GPU 加速导致的基线计算失准。

• 给包含 ruby 的可编辑容器加 transform: translateZ(0)
• 不要用 will-change: transform 替代，它在 contenteditable 中反而引发重绘抖动
• 该问题仅影响 iOS Safari，Chrome for iOS 和 Android Chrome 无需此 hack

多音字标注真正难的不是生成拼音，而是让每个 rb/rt 对在不同字体、不同缩放、不同输入状态下，都保持基线一致、不扰动周围文本流——这要求你放弃“设一次就完事”的想法，把 ruby、rb、rt 的尺寸与行高当作一个耦合系统来调。

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