ruby标签是专为注音设计的语义化元素，需包含rb和rt子元素，渲染位置与间距由浏览器内置样式控制，无法通过CSS精确调整。
ruby标签的语义与基本结构
ruby 标签不是装饰性容器，而是专为「注音」或「表意文字辅助标注」设计的语义化元素。它必须包含至少一个 rb（base text）和一个 rt（ruby text）子元素，典型结构是：<ruby><rb>漢</rb><rt>かん</rt></ruby>。浏览器会将 rt 内容以小号字体、紧贴 rb 顶部（水平书写时）的方式渲染，但这个位置和尺寸并非由 CSS 直接控制——它是 UA（用户代理）内置样式的一部分。
浏览器渲染差异与兼容性陷阱
主流浏览器对 ruby 的支持已较稳定（Chrome 57+、Firefox 38+、Safari 5.1+），但细节表现不一致：
- Firefox 默认给
rt添加text-align: center，而 Chrome/Safari 倾向左对齐基字（rb）中心； - Edge（旧版）曾完全忽略
ruby，直接线性展开内容； - 所有浏览器均不支持对
rb或rt设置display: block或float，强行设置会导致布局断裂或回退到普通 inline 行为； -
ruby元素内嵌套span或其他行内元素是允许的，但若在rb中混用块级元素（如p），多数浏览器会静默忽略该块级元素或将其压平为文本。
可控样式范围与不可控边界
你能安全调整的只有有限几个属性：
-
font-size和line-height可作用于ruby容器，间接影响rt大小（但部分浏览器会重置rt的font-size为固定比例，如 50%）； -
color、text-shadow、font-family对rb和rt分别生效； -
ruby-position是关键控制项：设为over（默认）时rt在基字上方，under则置于下方（适用于缅甸文等垂直标注场景）； - 不能用
margin、padding或transform移动rt相对于rb的位置——这些声明会被 UA 忽略； -
ruby-align（start/center/space-between）仅在多字符rb对应单个rt时起作用，且 Safari 当前不支持。
替代方案与实际落地建议
当需要精确控制注音位置、支持老版本 IE、或需配合动画/交互时，ruby 不是可靠选择：
立即学习“前端免费学习笔记（深入）”；
- 用
span+position: relative / absolute模拟是最常用兜底方案，但需手动计算基线对齐； - 对中文古籍或日文教育类站点，建议优先用原生
ruby，并用@supports (display: ruby)做特性检测后加载增强样式； - 避免在
ruby中嵌套button或a——可访问性工具可能无法正确识别其语义层级； - 若内容需翻译或 SEO 抓取，确保
rb和rt的文本顺序符合阅读逻辑，不要依赖视觉排列欺骗爬虫。
真正难处理的不是怎么写，而是当设计稿要求「rt 偏右 2px」「rb 和 rt 间距为 0.1em」时，你得接受：浏览器不给你这个权限。
