Ruby 标签必须由 rb 和 rt 组合使用才能正确渲染拼音，单独使用 ruby 无效；rb 包裹被注音汉字不可省略，rt 必须紧随对应 rb；多字应分层 rb+rt，避免语义错位与排版异常。
ruby 标签的基本结构必须是 rb + rt
HTML 的 ruby 不是单独用一个标签就能出效果的，它必须配合 rb（base text）和 rt（ruby text）才能正确渲染拼音。浏览器只认这个组合结构，写成 汉 是无效的——缺少 rb，多数浏览器会忽略或降级显示。
正确写法示例：
<ruby><rb>汉</rb><rt>hàn</rt></ruby>
-
rb包裹被注音的汉字，不能省略，也不能用普通文本替代 -
rt必须紧跟在对应rb后（或同一层级内），不能跨rb混用 - 多个字一组注音时，每个字建议各自套一层
rb+rt，避免语义错位
多音字或词组注音要拆开写，别指望自动对齐
像“长”这种多音字，或者“重庆”这种地名（chóng qìng，不是 zhòng qìng），ruby 不会根据上下文智能选音。你写什么音，就显示什么音。而且如果把整个词塞进一个 rb，比如
- 推荐按字拆：
重 庆 - 若需整体控制样式（如统一字号/行高），用
display: inline-flex包一层容器，别依赖ruby自动对齐 - 注意：部分旧版 Safari 对连续多个
ruby的间距处理异常，可加font-size: 0父容器再重设子元素字号来微调
不支持 ruby 的老浏览器会直接忽略 rt，但文字仍可见
IE 全系、Android 4.3 及更早 WebView、部分邮件客户端（如 Outlook Desktop）完全不解析 ruby 相关标签。它们会把 rt 当成未知标签丢弃，但里面的文本内容通常仍会作为普通文本流渲染出来——也就是拼音会平铺在汉字后面，变成“汉hàn”这样难看又难读的形式。
- 如需兼容，可用 JS 检测
document.createElement('ruby').tagName === 'RUBY'判断是否支持 - 不推荐用
rt做关键信息（比如考试答案、操作指引），因为降级后易被误读 - CSS 中不要给
rt设position: absolute或visibility: hidden，否则不支持时文字直接消失
用 CSS 控制 rt 位置时，优先用 ruby-position 而非 margin
虽然你可以用 rt { margin-top: -0.5em } 把拼音往上拉，但这属于“模拟”，容易在不同字体、字号、行高下偏移失准。现代浏览器支持标准属性 ruby-position，值为 over（默认）或 under，能真正触发浏览器内置的 ruby 排版引擎。
- 设置
rt { ruby-position: over; }更可靠，且支持响应式字号缩放 -
ruby-align: center可让拼音相对于汉字水平居中（默认是 start） - 慎用
line-height在ruby外层调整，它会影响基线，可能导致相邻行文字错位
实际项目里最容易被忽略的，是当文字来自 CMS 或用户输入时，没做 HTML 转义就直接插进 rb 和 rt，结果拼音里混进 或引号导致标签断裂。得先清理、再嵌套，顺序不能反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
