ruby标签必须显式使用rb包裹基字、rt标注读音，缺rb会导致拼音不显示或错位；多字需逐字拆分rb+rt；浏览器渲染差异大，需css重置样式；旧浏览器兼容性差，关键场景应避免依赖ruby。
ruby标签不加rb就无效
浏览器只认 rb + rt 的组合结构，写成 <ruby>汉<rt>hàn</rt></ruby> 是错的——rt 前面缺 rb，多数浏览器会直接忽略整个 rt，或降级为普通内联文本。必须显式包裹基字：<ruby><rb>汉</rb><rt>hàn</rt></ruby>。
常见错误现象：拼音没显示、拼音贴在汉字右边、整段文字排版错乱。根源几乎都是漏了 rb 或 rb 和 rt 没一一对应。
-
rb不可省略，也不能用纯文本替代（比如写成<ruby>汉<rt>hàn</rt></ruby>） - 多字注音时，每个字单独套一层
rb+rt，别把“重庆”塞进一个rb里 -
rt必须紧跟对应rb，不能跨rb混用（例如<rb>重</rb><rb>庆</rb><rt>chóng</rt><rt>qìng</rt>是错的）
Chrome/Firefox/Safari 渲染差异极大
rt 在 Chrome 和 Firefox 中默认是小号、上标、灰色；但在 Safari 中可能不缩放、不居中、垂直偏移明显——这不是 bug，而是规范允许浏览器自行实现。你不能指望不加 CSS 就有统一效果。
必须重置的关键样式：
-
font-size：建议设为0.6em～0.75em，避免过大撑开行高 -
line-height：设为1或略小，防止上下留白异常 -
text-align：配合ruby-align: center才能真正水平居中 -
ruby-position：优先用rt { ruby-position: over; }，比手动margin-top更可靠、响应式友好
别用 position: absolute 或 visibility: hidden 控制 rt，老浏览器不支持 ruby 时会直接丢弃内容，导致拼音彻底消失。
兼容性差是硬伤，降级行为不可控
IE 全系、Android 4.3 及更早 WebView、Outlook Desktop 等完全不解析 ruby/rb/rt。它们会把 rt 当作未知标签丢弃，但里面文本仍作为普通流渲染——结果就是“汉hàn字zì”，拼音平铺在汉字后面，语义和可读性全毁。
无法靠 CSS 或 JS 完全兜底，因为：
- JS 检测支持与否只能做开关，不能还原排版逻辑
- 用
display: inline-flex包裹多个ruby是权宜之计，但旧版 Safari 对连续ruby间距处理异常 - 部分安卓 WebView 会把
rt内容渲染成灰色小字但位置错乱，且无法用 CSS 修正
若注音是关键信息（如教学材料、考试题干），别依赖 ruby；纯文本拼音+CSS 模拟更可控。
多音字和词组必须人工拆解
ruby 不识别语境，不会自动选“长（cháng）”还是“长（zhǎng）”，也不会判断“重庆”该读 chóng qìng 而非 zhòng qìng。你写什么，它就显示什么。
词组注音尤其危险：把 <rb>重庆</rb><rt>zhòng qìng</rt> 一起写，拼音易被压扁、挤在一起，不同字体下宽度不可控。
- 按字拆最稳妥：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 如需整体控制字号/行高，用父容器设
font-size: 0，再给ruby单独设字号，避免继承干扰 - 不要指望
ruby自动对齐多字基文——它只对单个rb做对齐，跨字对齐必须靠人工拆分
真正麻烦的从来不是怎么写，而是怎么让所有人看到一致的效果。只要目标用户里有旧版 Safari 或企业邮箱用户，就得提前接受「拼音会跑出来」这个事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
