低版本浏览器完全忽略ruby标签，因未实现Ruby布局模块；必须配rp括号、逐字拆分、设正确lang属性，否则注音失效或语义污染。
ruby 标签在低版本浏览器（如 IE、旧版 Safari/Android WebView）中不是“部分失效”，而是整块被忽略——rt 不渲染、拼音彻底消失，连降级括号都可能不显示。根本原因不是写法错，而是浏览器压根没实现 Ruby 布局模块。
为什么只写 ruby + rt 还是无效
常见错误是认为只要写了 <ruby>汉<rt>hàn</rt></ruby> 就够了。但实际中：
- Firefox 78–97、Safari 15.3 及更早、所有 IE 版本完全不解析
ruby结构，DOM 中无rt节点，CSS 也选不到 -
rt必须直接子元素，不能隔层（如<ruby><span>汉</span><rt>hàn</rt></ruby>会失效） - 若服务端输出空
<rt></rt>，部分屏幕阅读器会读作“空白注音”，语义污染比不显示更糟
必须加 rp，且位置和内容有硬约束
rp 不是可选项，它是唯一被旧浏览器当作普通内联元素渲染的标签。但它的用法极敏感：
- 必须成对出现在
rt内部：✅<rt><rp>(</rp>hàn<rp>)</rp></rt>；❌<rp>(</rp><rt>hàn</rt>)（rp在rt外，被忽略） -
rp内容只能是纯括号字符，不能有空格、全角符号或字母：❌<rp>( </rp>（含空格）、❌<rp>（</rp>（全角括号） - Chrome 渲染
rp为可见括号，Safari 隐藏它——生产环境建议统一加rp { display: none; }，再靠 JS 检测后动态插入括号文本
多字注音必须逐字拆开，不能共用 rt
把“汉字”塞进一个 ruby 配一个 rt 是典型陷阱：
立即学习“前端免费学习笔记（深入）”；
- ❌
<ruby>汉字<rt>hàn zì</rt></ruby>→ Safari 渲染错位，空格被当分隔符，拼音挂错位置 - ✅ 正确写法是：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby> - 数字/英文混排时，也要套
rb：如「第<ruby><rb>123</rb><rt>yī èr sān</rt></ruby>页」，否则断行脱节
导出 PDF 或打印时拼音必然消失，必须 JS 降级
wkhtmltopdf、Puppeteer、浏览器原生打印预览全部不支持 ruby 布局——它们解析到 rt 就跳过，DOM 都不建。临时补救方案：
- 导出前执行 JS 遍历所有
ruby，提取rb文本和rt文本，拼成「汉(hàn)」格式 - 别用
innerHTML替换，先cloneNode(true)，再用textContent安全提取，避免 XSS - 如果项目允许，服务端按 UA 判断：IE/旧 Safari 直接输出降级文本，跳过生成
ruby标签
最易被忽略的一点：HTML 的 lang 属性没设对，ruby 就算写得再标准也会降级为普通文字。必须确保 <html lang="zh-CN">，且语言切换时同步改 document.documentElement.lang，否则 Firefox/Safari 立刻当它不存在。
