ruby标签不支持position定位，必须用ruby-position和ruby-align控制注音位置；rb标签不可省略，需与rt严格配对；非标准样式会破坏语义、换行和读屏支持。
ruby 标签本身不接受 position 定位，强行给 rt 加 position: absolute 或 top 会破坏语义、换行错位、屏幕阅读器朗读混乱——这不是样式问题，而是布局模型被绕过导致的结构性失效。
ruby-position 和 ruby-align 是唯一合规的定位控制方式
这两个 CSS 属性专为 ruby 结构设计，现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）已稳定支持：
-
ruby { ruby-position: over; }—— 注音默认在基字上方；设为under可放下方，适合方言或训读标注 -
ruby { ruby-align: center; }—— 让拼音水平居中对齐单个汉字；start（默认）在纯中文场景下也够用，但遇到日文假名或宽窄混合字符时容易偏左 - 不要对
rt单独设display、width或margin，这会干扰浏览器自动收缩字体（约 70% 基文字号）和贴合基线的逻辑
为什么直接给 rt 加 transform 或 vertical-align 会出问题
rt 不是普通内联元素，它属于 ruby 布局模型的一部分。浏览器靠整套语义结构（ruby+rb+rt）自动计算垂直定位，不是靠 CSS 覆盖。
-
transform: translateY(-0.3em)看似能调高矮，但换行时基线对齐失准，多字连续标注易堆叠或悬空 -
vertical-align: super让rt相对于行高偏移，而非相对于基字，导致缩放后位置漂移 -
position: absolute会让rt脱离文档流，换行时注音仍浮在第一行上方，视觉脱钩
rb 标签现在是必需项，不能省略
2026 年主流浏览器（尤其是 Firefox 和 Safari）已要求显式声明被注音字，仅写 <ruby>汉<rt>hàn</rt></ruby> 是无效结构——Chrome 可能勉强渲染，但其他浏览器直接降级为平铺文本“汉hàn”。
立即学习“前端免费学习笔记（深入）”；
- 必须写成：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 每个字都要独立
rb+rt配对，中间不能有空格、换行或零宽字符 -
rb内只能是纯文本节点，或仅含内联格式（如<strong>重</strong>可接受），不能含<div>、<span>等块级或嵌套容器
移动端与读屏软件依赖原生布局语义
iOS VoiceOver、Android WebView、NVDA 等工具靠 ruby 的原生布局语义确定朗读顺序和焦点位置。一旦你用非标准方式扰动基线，它们可能把拼音读成独立词，或跳过整个注音块。
- 安全做法只有两个：
ruby { line-height: 1.8; }控制整体行距，避免rt被上一行压扁 -
rt { font-size: 0.65em; line-height: 1; }微调紧凑度，不碰任何定位相关属性 - 别指望
rp在 iOS Safari 中可靠显示括号——它只是老浏览器降级占位符，现代项目可省略
最常被忽略的是：多字连续标注时，rb 和 rt 必须严格紧邻，中间不能有任何空白字符；哪怕一个看不见的 （零宽空格）都会让 Safari 拒绝渲染注音。
