ruby缩放失效因rt不继承font-size，应统一用rem控制；拼音错位需显式设ruby-position和ruby-align，并为老浏览器提供fallback结构。
ruby标签缩放失效，文字变大但拼音错位
直接给 <ruby> 或其父容器设 font-size，汉字会放大，但 <rt> 拼音常卡在原尺寸或偏移——因为多数浏览器对 ruby 内部子元素的继承行为不一致，rt 不一定自动继承父级字号。
真正可控的做法是把缩放逻辑上提到根元素，统一用 rem：先设 html { font-size: 16px; }，再让所有文字（包括 rb 和 rt）用 font-size: 1rem 或倍数。这样改一次 html 的 font-size，整个 ruby 结构就同步缩放。
- 别在
ruby上直接写style="font-size: 20px"，它可能只影响rb，而rt仍按默认字号渲染 - 若需响应式缩放，用
html { font-size: clamp(14px, 2.5vw, 18px); }，但注意 Safari 13.1+ 才稳定支持clamp() - 旧版 Safari 对连续多个
ruby的行间距处理异常，可临时加font-size: 0到父容器，再给rb和rt单独设font-size: 1rem
拼音和汉字水平/垂直对不齐
ruby 默认排版依赖浏览器内置引擎，但不同浏览器对 ruby-align 和 ruby-position 的实现有差异。比如 Chrome 和 Firefox 支持 ruby-position: over（拼音在上），但部分安卓 WebView 会忽略；ruby-align: center 能让拼音相对汉字水平居中，但 IE 和老 Android 完全不识别这些属性。
实操建议优先用标准属性打底，再加降级样式：
立即学习“前端免费学习笔记（深入）”；
- 必须写
<rb>汉</rb><rt>hàn</rt>，不能省略rb，否则多数浏览器直接丢弃rt - 显式声明
rt { ruby-position: over; ruby-align: center; }，比靠默认值更可靠 - 降级方案：对不支持
ruby-position的环境（如 Outlook Desktop），加rt { position: relative; top: -0.6em; }模拟上移，但要配合固定line-height防止偏移漂移
多音字、地名拼音被压扁或挤在一起
把整词塞进一个 rb（如 <rb>重庆</rb><rt>chóng qìng</rt>）会导致拼音字符间距坍缩——浏览器按“一个 ruby 单元”处理，不会为每个汉字分配独立占位，拼音容易连成一串、视觉不可读。
解决思路不是强行撑开 rt，而是回归语义结构：
- 坚持“一字一拼”，拆成
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 若需整体控制样式（如统一字号、行高），用
display: inline-flex包一层容器，别依赖ruby自动对齐 - 避免给
rt设letter-spacing，它在不同字体下表现不稳定；改用rt::before { content: " "; }插空白字符更可控
老浏览器里拼音平铺在汉字后面
IE 全系、Android 4.3 及更早 WebView、Outlook Desktop 等完全不解析 ruby 标签，会把 rt 当作未知标签丢弃，但其中文本仍作为普通文本流渲染——结果就是“汉hàn”这种难看又难读的形式。
这不是样式问题，是 HTML 解析层面的降级，没法靠 CSS 修复。唯一务实做法是预埋 fallback：
- 用
<span class="ruby-fallback">汉<span class="pinyin">hàn</span></span>作为降级结构，CSS 里用@supports not (ruby-position: over) { .ruby-fallback .pinyin { display: inline; } } - 不依赖 JS 动态插入 fallback，因为邮件客户端通常禁用脚本
- 测试时务必真机跑 Android 4.4 WebView 和 Outlook for Windows，模拟器或现代浏览器 devtools 的“设备模式”无法准确复现这类解析异常
最易被忽略的是：ruby 的排版稳定性极度依赖字体本身。同一段代码，换用「思源黑体」和「微软雅黑」，拼音基线位置可能差 1–2 像素。上线前得在目标字体下实测，别只信设计稿。
