chrome和firefox中rt默认样式不一致，chrome渲染为小号上标灰色文字，firefox更接近基字大小，且line-height计算不同致1–2px偏移；必须显式设rt font-size（如0.7em）和line-height:1，禁用vertical-align:super，safari对ruby结构最敏感，ie≤10及部分安卓webview不支持。
Chrome 和 Firefox 中 rt 默认样式不一致
Chrome 会把 rt 渲染为小号、上标、灰色文字，Firefox 则默认更接近基字大小、无明显缩放；两者 line-height 计算逻辑也不同，导致垂直对齐位置常有 1–2px 偏移。这不是 bug，而是 HTML 规范允许浏览器自行实现渲染细节。
实操建议：
- 必须显式重置
rt的font-size（推荐用固定值如12px或0.7em），避免用百分比或rem导致跨浏览器缩放失准 - 加
line-height: 1防止因行高撑开造成上下留白 - 禁用
vertical-align: super——它依赖基字行高，不是相对于基字本身定位 - Chrome 下若发现
rt被截断，可加ruby { display: ruby; }强制识别（Firefox/Edge 也兼容）
Safari 对 ruby 结构和 rp 处理最敏感
Safari 是当前对 ruby 语义最严格的浏览器：漏掉 rt、rt 不紧贴基字、或 rp 写错位置（比如放在 rt 外），都可能导致注音完全不显示，或字体异常放大/错位。
常见错误现象：
-
<ruby>汉字<rt>hàn zì</rt></ruby>→ “汉”“字”共用一个rt，Safari 无法对齐，常只显示第一个字的拼音 -
<rp>(</rp><rt>hàn</rt><rp>)</rp>→rp在rt外，Safari 忽略整个 fallback，且可能破坏渲染流 - 空
<rt></rt>→ Safari 有时会保留占位但不渲染内容，导致基字上方出现不可见间隙
实操建议：逐字包裹 ruby，rt 必须紧跟基字；rp 仅用于兜底，且严格写成 <rt><rp>(</rp>hàn<rp>)</rp></rt>；生产环境建议服务端 UA 判断后直接移除 rp。
IE ≤10 和部分安卓 WebView 完全不支持 ruby
IE 10 及更早版本无视 ruby、rt、rp 所有标签，直接线性渲染所有文本（即“汉字hàn zì”连在一起显示）。部分旧版安卓 WebView（如 Android 4.4 系统自带）虽识别 ruby 开始标签，但忽略 rt，导致注音丢失。
替代方案选择依据：
- 若需支持 IE10 或低端安卓设备，放弃纯 HTML
ruby，改用span+ CSS 定位（如position: relative+top: -1em），并用aria-label保无障碍 - 若仅需现代浏览器支持，可用 JS 库（如
pinyin-pro）动态生成正确结构，再注入 DOM —— 但注意不要在 SSR 阶段输出无效结构 - 禁止用
abbr[title]替代ruby：语义错误，屏幕阅读器会读出整段解释，而非作为发音辅助
多语言混排时 lang 和 bdi 缺一不可
当页面含阿拉伯文、希伯来文等 RTL 文本，又插入中文 ruby 注音时，不加 bdi 或 lang，Safari/Chrome 可能将拼音文字拖入 RTL 流，导致横向错位甚至反向排列；Firefox 则可能因未声明语言而用日语 TTS 引擎朗读拼音。
正确写法示例：
<p lang="ar">مرحبا <bdi lang="zh-Hans"><ruby>李<rt>lǐ</rt></ruby></bdi></p>
关键点：
-
bdi必须包裹整个ruby，不能只包基字或只包rt -
lang属性要设在bdi上（而非ruby），确保语音引擎准确识别 - 禁止给
bdi加dir属性：<bdi dir="auto"></bdi>是冗余的，bdi默认就是dir="auto"且带unicode-bidi: isolate
真正难处理的不是单个标签怎么写，而是当注音来自 CMS 或用户输入时，如何确保每个字都套了独立 ruby、rt 不为空、lang 值动态匹配、且 bdi 不被服务端模板意外剥离——这些环节漏一个，就可能在某个浏览器里彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
