<ruby>标签必须包含<rt>子元素才能显示注音，且<rt>须为<ruby>的直接子元素、紧邻<rb>无空格换行；多字需分拆多个<ruby>；<rp>仅在<rt>内纯括号时生效；字号宜用固定像素而非百分比。
ruby标签没配rt，注音完全不显示
只写<ruby>汉</ruby>，浏览器会当普通内联元素处理，拼音彻底消失。因为rt不是可选装饰，而是语义必需子元素——没有它，整个ruby块被忽略。
- 错误写法：
<ruby>汉字</ruby><rt>hàn zì</rt>（rt脱离ruby） - 正确写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby>（显式rb+rt成对） - 服务端生成时若拼音为空，跳过整个
rt节点，别留空<rt></rt>——屏幕阅读器可能读作“空白注音”
rt没紧贴rb或基字，导致 Safari/旧 WebView 错位
rt必须是ruby的直接子元素，且与对应汉字之间不能有空格、换行或其它标签隔开。否则 Safari 16.4+ 和部分 Android WebView 会合并注音或垂直偏移。
- 错误示例：
<ruby><rb>重</rb>\n<rt>chóng</rt></ruby>（换行符破坏紧邻关系） - 正确写法：
<ruby><rb>重</rb><rt>chóng</rt></ruby>（无空格、无换行） - 多字必须逐字拆开：
<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby>，不能共用一个rt
rp位置或内容违规，fallback 失效
rp不是样式辅助，是专为 IE ≤10、旧邮件客户端等不支持ruby的环境设计的降级开关。它只有在rt内部、且内容仅为纯括号字符时才生效。
- 错误写法：
<rp>(</rp><rt>nǐ</rt><rp>)</rp>（rp在rt外，被忽略） - 错误写法：
<rt><rp>( </rp>nǐ</rt>（含空格，部分浏览器不触发 fallback） - 正确写法：
<rt><rp>(</rp>nǐ<rp>)</rp></rt>，并配合 CSSruby rt rp { display: none !important; }避免 Chrome 渲染出可见括号
用font-size百分比控制rt字号，结果错位或截断
不同浏览器对rt的字号基准计算不一致：有的按父ruby，有的按根字体，设font-size: 70%极易导致拼音偏高、压字或被裁剪。
立即学习“前端免费学习笔记（深入）”；
- 推荐固定像素：
rt { font-size: 12px; line-height: 1; vertical-align: text-top; } - 禁用
vertical-align: super——它依赖行高，而非基字高度，易偏移 - 不要给
ruby设display: inline-block，会破坏内联流，引发意外换行和间距异常
ruby在 iOS Safari 上会有微小字距异常，需要用父容器font-size: 0 + 子元素重设字号来压制；还有就是动态生成时没过滤用户输入里的换行符和全角空格，一塞进去结构就断了。 
