ruby-position是唯一可靠控制拼音上下位置的css属性，仅支持over（默认，上方）和under（下方）两值，必须作用于rt元素以触发浏览器原生ruby排版引擎。
ruby-position 是唯一可靠控制拼音上下位置的 CSS 属性
浏览器对 <rt></rt> 的默认垂直定位由内置排版引擎决定，margin-top、transform: translateY() 或 position: relative 都是模拟行为，缩放、换行或字体变化时极易偏移。真正触发原生 ruby 对齐逻辑的，只有 ruby-position。
它只接受两个值：over（横排时在上方，默认值）和 under（横排时在下方），竖排时分别对应右侧与左侧。不支持 left/right 或像素偏移。
-
ruby-position: over在所有现代浏览器中表现一致，无需额外声明 - 若需强制统一为上方（比如禁用某些浏览器的竖排自动切换逻辑），显式写上更稳妥
- 不要用
ruby-position: center——该值不存在，会导致声明无效
ruby-align 控制拼音相对于汉字的水平对齐方式
默认 ruby-align: start 会让拼音左缘对齐汉字左缘，但汉字字宽不均（如「一」窄、「龜」宽），视觉上常显偏右。设为 center 才符合中文注音习惯。
-
ruby-align: center让拼音整体水平居中于基字盒内，不是字符中心点对齐 - 该属性必须作用于
<rt></rt>元素本身，写在<ruby></ruby>上无效 - Safari 16.4+ 和 Chrome 110+ 支持良好；Firefox 需要同时设置
ruby-position: over才生效
line-height 和 font-size 组合才是防止拼音被裁的关键
很多页面里拼音“看不见”或“压在字上”，根本不是 <rt></rt> 没渲染，而是父容器行高太小，把 <rt></rt> 的顶部直接截掉了。
- 给
<ruby></ruby>设置line-height: 1.8（至少比基字字号大 0.6em）可预留足够垂直空间 -
<rt></rt>自身设font-size: 0.6em，别依赖浏览器默认的 50%，不同引擎缩放比例不一致 - 禁用
line-height在<rt></rt>上——Firefox 会把它拉得过高，导致上下留白失控
多字连续 ruby 的间距异常问题怎么解
连续多个 <ruby></ruby> 并排时，Safari 和旧版 Edge 容易在字间插入不可控空隙，看起来像拼音“飘走了”。这不是 bug，而是浏览器把每个 <ruby></ruby> 当作独立内联盒处理，受父级 font-size 和空白符影响。
- 最稳方案：在外层包一层
<span style="font-size: 0"></span>，再重设子元素字号，消除空白符占位 - 次选：用
white-space: nowrap禁止换行，同时确保 HTML 中<ruby></ruby>标签间无换行或空格 - 避免用
letter-spacing或word-spacing调整间距——它们会同时影响汉字和拼音，破坏对齐
真正难调的从来不是单个字的拼音位置，而是当字号缩放到 12px、行高压缩到 1.2、又遇上思源黑体和苹方混排时，ruby-align 和 line-height 的组合是否仍能守住那条看不见的基线。这时候手动加 ruby-position 就不是“可选优化”，而是保底动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
