必须用包裹每个被注音字符，漏掉则浏览器不渲染注音；多字须逐字独立嵌套，如“苹苹píng果果guǒ”，禁用合并写法以防错位。
ruby结构里漏掉
没
常见错误包括：
- 把拼音直接塞进里：
<ruby>汉hàn</ruby>——hàn被当普通文本流排版 - 误用
<rp></rp>替代<rt></rt>：<ruby>汉<rp>(hàn)</rp></ruby>——括号可能显示，但无上标效果 - 动态生成时拼错标签名，比如写成
<rtt></rtt>或<rt></rt>（大小写敏感）
多字注音必须逐字配对，不能合并
“苹果”写成<ruby><rb>苹果</rb><rt>píng guǒ</rt></ruby>看似省事，但实际会出问题：换行时“píng guǒ”可能整体飘到行首或行尾，与“苹”“果”彻底脱钩；缩放或字体替换后，拼音宽度变化，对齐完全失控。
安全做法是每个汉字独立包裹：
<ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby>- 混排数字/英文时，只给汉字套
： <ruby><rb>第</rb><rt>dì</rt></ruby>123<ruby><rb>页</rb><rt>yè</rt></ruby> - 多音字必须拆开处理：
<ruby>长<rt>zhǎng</rt></ruby>大 <ruby>长<rt>cháng</rt></ruby>度
Firefox和Edge对是硬性要求，Chrome/Safari会宽容
<ruby>汉<rt>hàn</rt></ruby>在Chrome和Safari里能显示拼音，是因为它们自动把内非
所以跨浏览器一致的写法只有一种：
- 必须用
<rb></rb>包裹每个被注音字符 - 必须让
<rt></rt>紧贴对应<rb></rb>之后，不能隔标签、不能跨行 - 如需兼容IE8–9，加
<rp></rp>：<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
注音被裁剪或挤成一团，本质是line-height和font-size失控
父容器设了line-height: 1，
可靠解法是放弃百分比，用固定像素控制：
- 给
<ruby></ruby>设line-height: 1.8，留足垂直空间 - 给
<rt></rt>设font-size: 12px+line-height: 1.2，禁用默认缩放干扰 - 加
ruby { white-space: nowrap; }防换行断裂，但别设在段落级，否则影响正文流
真正容易被忽略的点是：动态注入注音时，如果某字拼音为空（比如生僻字查不到），千万别输出<rt></rt>——屏幕阅读器会读作“空白注音”，用户听到一连串“呃…呃…呃…”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
