ruby注音必须同时使用rb和rt标签，缺一不可；正确结构为汉hàn，且需配合css样式（如rt{font-size:0.6em}）和rp标签兼容旧浏览器。
ruby必须配rb和rt才能生效，缺一不可
只写<ruby>汉</ruby>或<ruby>汉<rt>hàn</rt></ruby>，拼音大概率不显示或错位——前者完全无效，后者因缺失rb，多数现代浏览器（Chrome 115+、Safari 17.4+）会降级为普通内联文本，rt失去语义锚点，可能贴在字右侧、被截断，甚至被忽略。
正确结构必须是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>。其中：
-
rb显式包裹被注音汉字，不能省略，也不能用纯文本替代 -
rt必须紧跟对应rb，二者一一匹配；顺序颠倒（如rt在rb前）会导致拼音错位到前一字 - 多字必须拆开：用多个
ruby并列，而非一个ruby包整词
rt样式必须显式设置，否则排版失控
浏览器对rt的默认渲染极简且不一致：Chrome 可能压字，Firefox 可能拉高，Safari 可能留白过大。不加 CSS，rt字号常与基字相同，垂直位置也无保障。
关键样式建议：
-
rt { font-size: 0.6em; }—— 百分比值比70%更可靠，避免不同引擎基准差异 -
rt { line-height: 1; }—— 防止 Firefox 把拼音撑高 -
ruby { line-height: 1.8; }—— 给拼音留出垂直空间，防被父容器裁切 -
ruby { ruby-align: center; }—— 显式声明水平居中（部分旧浏览器需此声明） - 禁用
position: absolute、visibility: hidden或overflow: hidden，否则降级后拼音直接消失
rp标签不是装饰，但现代项目可谨慎省略
rp的作用非常具体：在 IE ≤10、Android 4.3 WebView 等不支持ruby的环境里，让拼音至少以括号形式可读（如「汉(hàn)」）。没有它，老浏览器会丢弃rt，只剩裸汉字或平铺拼音（「汉hàn」），阅读体验崩坏。
但实际使用中要注意：
- Chrome 120+ 会把
rp内容当作可见字符渲染，导致显示为「汉(hàn)」；Safari 则按规范隐藏，只显示上方小字「hàn」 - 正确位置只能是
<rt><rp>(</rp>hàn<rp>)</rp></rt>，rp不能在rt外，也不能含空格或非括号字符 - 若项目明确不兼容 Android 4.x 或 IE，可省略
rp；但别误以为它是“可有可无的样式辅助” - 服务端渲染时，推荐按 UA 动态移除
rp，比 JS 删除更稳，避免首屏闪动
动态生成 ruby 结构时最容易漏掉三件事
用pinyin-pro或自研脚本批量生成拼音，看似方便，实则极易埋坑：
- 没过滤标点：逗号、句号等非汉字字符被误包进
ruby，破坏语义和屏幕阅读器朗读顺序 - 声调格式错误：某些拼音库返回
ni3 hao3，但rt需要 Unicode 声调符号（nǐ hǎo），否则显示为数字，排版错位 - 未转义 HTML 特殊字符：用户输入含
&、等，直接拼字符串会破坏 DOM 结构，甚至引入 XSS；必须用<code>DOMPurify.sanitize()过滤或封装组件确保结构安全
最易被忽略的是：所有现代浏览器都支持ruby，但 Safari 对连续多个ruby的字间距处理异常，尤其在缩放或换字体时——此时得靠font-size: 0父容器 + 子元素重设字号来微调，而不是硬调margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
