根因是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，导致拼音忽大忽小、行高跳变。
-
rt固定用font-size: 0.6em（不是50%，也不是10px） -
rb不要设font-size，让它完全继承上下文，保证基字尺寸稳定 - 多音字如「长」需拆成两个
<ruby><rb>长</rb><rt>cháng</rt></ruby><ruby><rb>长</rb><rt>zhǎng</rt></ruby>，不能塞进一个 <code>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 的尺寸与行高当作一个耦合系统来调。 
