+是标准解法，但IE9–11和老安卓WebView会漏掉注音；必须用成对兜底，并通过JS检测display:rube支持性来触发class降级方案。
用 <ruby></ruby> + <rt></rt> 是标准解法，但 IE9–11 和老安卓 WebView 会漏掉注音
现代浏览器（Chrome/Firefox/Safari/Edge）对 <ruby></ruby> 支持良好，<rt></rt> 能准确定位多音字读音。但 IE9–11 不渲染 <rt></rt>，老版安卓 WebView（如 Android 4.4 KitKat）也常忽略它——不是样式问题，是解析阶段就跳过了整个 <rt></rt> 节点。
典型错误现象：<ruby>行<rt>xíng</rt></ruby> 在 IE10 中显示为纯“行”，括号和拼音全无；开发者工具里 <rt></rt> 标签存在但无盒模型、无 computed style。
根本原因：IE9–11 把 <rt></rt> 当作未知内联元素，不参与排版流程；且不支持 ruby 的默认 display 值（ruby 应为 display: ruby，但 IE 里 fallback 为 inline）。
<rp></rp> 不是可选项，是旧浏览器兜底的强制开关
<rp></rp> 的唯一作用，就是在不支持 <ruby></ruby> 的浏览器里显示括号——它本身不参与语义，只负责“视觉降级”。但必须成对出现，否则整个结构失效。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ✅ 正确写法：
<rp>(</rp><rt>nǐ</rt><rp>)</rp> - ❌ 错误写法：
<rp>(</rp><rt>nǐ</rt>（漏右括号）、<rt>nǐ</rt><rp>)</rp>（左括号缺失） - ⚠️ 注意：
<rp></rp>内容只能是纯括号或空格，不能加 class、style 或其他标签
在 IE9–11 中，<rp></rp> 会被当作普通 inline 元素渲染，所以括号能显示；而 <rt></rt> 被静默丢弃。这就实现了“有拼音显拼音，没拼音显括号”的最小可用性。
IE8 及更早版本必须放弃 <ruby></ruby>，改用 class 模拟
IE8 完全不认识 <ruby></ruby>、<rt></rt>、<rp></rp> 这三个标签，连 DOM 节点都不会创建。此时 html5shiv 也救不了——它只补语义块级标签（如 <header></header>），不处理内联注音结构。
推荐降级方案：<span class="ruby">行<span class="rt">xíng</span></span>，再配 CSS：
span.ruby {
position: relative;
display: inline-block;
}
span.rt {
position: absolute;
top: -1.2em;
left: 50%;
transform: translateX(-50%);
font-size: 0.6em;
line-height: 1;
white-space: nowrap;
}
/* IE6–7 需要 zoom: 1 触发 hasLayout */
* html span.ruby { zoom: 1; }
* html span.rt { zoom: 1; }这个方案在 IE6–IE11、Android 2.3–4.4、iOS 6–9 全部可用，且 JS 可通过 document.querySelectorAll('.rt') 统一读取拼音内容。
别信条件注释，<ruby></ruby> 兼容性检测必须靠 JS
条件注释（如
