rt标签本身不控制位置，只定义注音内容；正确用法需搭配rb标签构成语义结构，通过ruby-position和ruby-align属性控制位置，且rb与rt必须严格紧邻、一一对应。
rt标签本身不控制位置，只定义注音内容
很多人以为给 rt 加 top 或 transform 就能调高矮，结果换行错位、缩放糊成一团。根本原因是：rt 不是普通内联元素，它属于 ruby 布局模型的一部分，浏览器靠整套语义结构（ruby + rb + rt）自动计算垂直定位，不是靠 CSS 覆盖。
强行用 position: absolute 或 vertical-align 会切断语义流，导致屏幕阅读器读成“汉字 拼音”连读，或完全跳过 rt。
真正可控的位置设置只有 ruby-position 和 ruby-align
这两个属性是 W3C 明确为 ruby 设计的，现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）已稳定支持：
-
ruby { ruby-position: over; }—— 默认值，拼音在汉字正上方；设为under可放下方（适合训读、方言标注） -
ruby { ruby-align: center; }—— 让拼音水平居中对齐单个汉字；默认start在中文场景下也够用，但遇到日文假名或宽窄混合字符时，center更稳 - 不要对
rt单独设display、width或margin，这会破坏浏览器自动收缩字体（约 70% 基文字号）和贴合基线的逻辑
为什么你写的 rt 没显示在字上方？大概率缺了 rb
2026 年主流浏览器已要求显式声明被注音字，仅写 <ruby>汉<rt>hàn</rt></ruby> 是无效结构——Chrome 可能勉强渲染，Firefox 和 Safari 直接降级为“汉hàn”平铺文本。
必须写成：<ruby><rb>汉</rb><rt>hàn</rt></ruby>，且每个字都要独立 rb + rt 配对：
- ✅ 正确：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - ❌ 错误：
<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby>（两字共用rb，声调位置错乱、换行易脱钩） - ⚠️ 注意：
rb内不能含span、em等包裹，必须是纯文本节点或仅含内联格式（如<strong>重</strong>可接受，但<div>重</div>会中断结构）
移动端和读屏软件对位置敏感，别依赖视觉微调
Android WebView、iOS VoiceOver、NVDA 等工具依赖 ruby 的原生布局语义来确定朗读顺序和焦点位置。一旦你用 transform: translateY(-0.2em) 扰动基线，它们可能把拼音读成独立词，或跳过整个注音块。
安全做法只有两个：
- 用
ruby { line-height: 1.8; }控制整体行距，避免rt被上一行压扁 - 用
rt { font-size: 0.65em; line-height: 1; }微调字号与紧凑度，不碰定位相关属性
最常被忽略的是：多字连续标注时，rb 和 rt 必须严格紧邻，中间不能有空格、换行或零宽字符——哪怕一个 都可能导致 Firefox 忽略后续所有 rt。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
