iOS Safari中ruby注音上飘是因将rt视为上标，需设ruby{display:ruby}、rt{line-height:1;font-size:.65em-.7em}、ruby{ruby-position:over}；Android WebView需降级为span+aria-label；竖排时Safari不支持ruby-position:right，须绝对定位；Flex中ruby换行错乱应加white-space:nowrap。
ruby标签在iOS Safari上注音位置偏移
最常遇到的问题是：Chrome 和 Firefox 里拼音居中对齐正常，Safari（尤其是 iOS 16+）却明显上飘、贴顶，甚至和上一行文字重叠。这不是 CSS 写错了，而是 Safari 对 ruby 的 line-height 和基线计算逻辑不同——它默认把 rt 当作“上标”处理，而非相对于基字垂直居中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制重置
ruby的 display 类型：ruby { display: ruby; }，避免 Safari 回退到 inline 行为 -
rt必须设line-height: 1，不能依赖父级行高；font-size推荐用0.65em～0.7em，不用 px 值 - 禁用
vertical-align或top类属性，它们会破坏语义对齐，且在 VoiceOver 中导致朗读错位 - 若仍偏移，加
ruby { ruby-position: over; }（仅 Safari 需要，Chrome/Firefox 已默认）
Android WebView中rt内容不渲染或字体变小
旧版 Android WebView（尤其 Android 7–9 的系统 WebView）对 ruby 支持极弱：可能完全忽略 rt，或把注音渲染成灰色小字、挤在左上角。这不是 bug，而是该引擎未完整实现 HTML5 ruby 渲染管线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不依赖
rp标签做降级——现代 WebView 基本不识别它，括号 fallback 无效 - 用媒体查询检测 WebView：
@supports not (display: ruby) { ... }，然后对不支持环境用span+aria-label替代 - 字体必须声明支持 Unicode 拼音区（U+0101–U+01CE 等），避免用系统默认中文字体（如 Droid Sans Fallback）导致声调符号缺失
- 避免嵌套
strong或em在ruby内——部分 WebView 会丢弃rt子树
横排与竖排混合时writing-mode失效
想在竖排古籍中让拼音出现在汉字右侧（而非上方），加 writing-mode: vertical-rl 后，Chrome 和 Firefox 能正确将 rt 移到右侧行内，但 Safari 仍固执地往上堆，且 ruby-position: right 完全不生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
ruby-position属性目前只有 Chrome 支持right/left，Safari 和 Firefox 仅认over/under - 竖排场景下，放弃纯 CSS 方案，改用绝对定位微调：
ruby { position: relative; } rt { position: absolute; top: 0; right: -0.8em; }，并配合transform: scale(0.8)控制大小 - 注意：这种 hack 会让屏幕阅读器跳过
rt，如需无障碍支持，必须额外加aria-hidden="true"并用aria-label在外层包裹
多字连续ruby在Flex布局中换行错乱
当把一串 <ruby>…<rt>…</rt></ruby> 放进 display: flex 容器时，Chrome 会把每个 ruby 当作一个 flex item 正常排列，但 Safari 可能将基字和 rt 拆开换行，导致拼音飞到下一行开头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有
ruby加white-space: nowrap，防止内部断行 - 避免对
ruby直接设flex: 1或min-width——这会干扰浏览器对 ruby 内部尺寸的测量 - 如需等宽排列，用
grid替代flex，设置grid-template-columns: repeat(auto-fit, minmax(2em, 1fr))更可靠 - 测试真机：模拟器常无法复现 Safari 的换行行为，务必在 iPhone 实机上验证
rt 的 font-size: 0.7em 会因基字字体被重排而再次失准——这时只能靠 JS 监听 resize 动态重算。 
