ruby标签仅提供语义结构，不负责美化；拼音错位或不显示的主因是缺失必要css（如rt需font-size:0.6em、ruby需line-height:1.8）及html嵌套错误。
ruby 标签本身不负责“美化”，它只提供语义结构；真正影响显示效果的是缺失的 CSS 和错误的 HTML 嵌套——不加样式，rt 很可能被压在字上、裁掉顶部，或干脆和汉字一样大。
为什么直接写 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 拼音不显示或错位
浏览器对 rt 的默认渲染极简：font-size 不继承、line-height 无保障、垂直对齐基准（baseline）各引擎不一致。Chrome 可能勉强可见，Firefox 容易压字，Safari 在窄容器里常截断顶部。
- 必须给
rt显式设font-size: 0.6em（不能依赖默认 50%） -
ruby父容器需设line-height: 1.8以上，否则拼音贴底或重叠 - 禁用
rt { position: absolute }——降级后拼音直接消失，且破坏屏幕阅读器识别 - 别用
margin-top: -0.5em模拟上移，缩放/换字体时必然偏移
让拼音居中、不溢出、适配多浏览器的最小 CSS 集合
以下样式不是“可选优化”，而是触发浏览器内置 ruby 排版逻辑的必要条件：
-
rt { font-size: 0.6em; line-height: 1; ruby-position: over; }（over是默认值，但显式声明更稳） -
ruby { line-height: 1.8; white-space: nowrap; }（防断行导致字音脱节） -
ruby-align: center加在ruby或rt上均可，部分旧 Safari 需要 - 避免给
ruby设overflow: hidden，否则拼音顶部被裁
移动端和打印场景下容易被忽略的断裂点
现代桌面浏览器渲染较一致，但两个地方会突然失效：
- iOS Safari 对连续多个
ruby的字间距处理异常，可临时加ruby { font-size: 0; } ruby * { font-size: 1rem; }微调 - wkhtmltopdf、Puppeteer 或某些 PDF 导出工具完全忽略
rt，导出后只剩汉字——这不是 bug，是这些引擎未实现 ruby 布局模块 - 邮件客户端（如 Outlook Desktop）把
rt当未知标签丢弃，但内容仍平铺为「汉hàn」，此时rp就关键了：<rp>(</rp><rt>hàn</rt><rp>)</rp>能降级为「汉(hàn)」，比裸露拼音可读得多
真正难的不是写出结构，而是在混排英文、数字、标点时保持 rb/rt 数量严格对齐，以及接受：ruby 的“美化”本质是克制——靠浏览器原生逻辑，而不是强行 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
