ruby-position 只能设在 ruby 元素上，支持 over/under/right 三值，safari 16.4+ 才真正支持 under；移动端 webview 兼容差，需 @supports 检测或 js fallback。
ruby-position 只能设在 ruby 元素上，不能写在 rt 上
很多人把 ruby-position: under 加到 rt 选择器里，结果完全无效——这个属性只对 ruby 容器生效，rt 自己不认它。浏览器会直接忽略该声明，拼音依然默认在上方。
正确写法是：
ruby {
ruby-position: under;
}
支持的值只有三个：over（默认，上方）、under（下方）、right（竖排时右侧）。别用 before/after，那是过时草案里的旧名，现代浏览器已不识别。
横排中文用 over 或 under 都行，但 under 在 Safari 16.4+ 才真正可用
Safari 在 16.4 版本之前只支持 ruby-position: over，设成 under 会被静默降级为 over，且不报错、不警告。Chrome 和 Firefox 从较早版本就稳定支持 under。
- 若项目需兼容 Safari ≤16.3，就别用
under；或加 JS 检测：getComputedStyle(document.createElement('ruby')).rubyPosition是否返回"under" - 用
under时注意：拼音和基字之间默认间距偏小，建议同步加line-height: 1.6到ruby上，避免贴在一起 -
right基本不用在中文横排场景，它专为竖排文本设计，设了也看不出效果
不要用 margin 或 transform 微调 rt 的上下位置
有人发现 rt { margin-top: -0.3em } 能把拼音往上拉一点，短期看着“凑合”，但这是在破坏 ruby 布局模型：
- 缩放页面时，偏移量不会等比变化，拼音容易跑出基字范围
- 多字连续标注时，
margin会累积影响行高，导致相邻行文字挤压 - 屏幕阅读器可能无法正确关联拼音与基字，朗读顺序错乱
- 打印 PDF 或 wkhtmltopdf 导出时，这类 hack 完全失效，拼音直接消失
真正可控的微调方式只有两个：ruby-align: center（水平居中）和调整 rt 的 font-size（比如 0.65em），其他都算越界操作。
移动端 WebView 对 ruby-position 支持极差，必须 fallback
Android 系统自带 WebView（尤其 Android 10 及更早版本）几乎无视 ruby-position，哪怕写了 under，仍强制渲染在上方；部分机型甚至整个 rt 不显示。
实操建议：
- 用
@supports (ruby-position: under)包裹样式，避免污染不支持环境 - 对关键场景（如教育类 App 内嵌页），用 JS 检测
ruby渲染高度是否异常，再动态插入span+position: relative模拟 - 别依赖
ruby-position实现核心功能逻辑，它只是视觉增强，不是语义必需
最易被忽略的一点：ruby-position 的行为依赖于整个 ruby 结构完整——rb 和 rt 必须一一对应、不能跨字、不能缺失容器。结构一松散，定位就彻底失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
