rp标签本身不提供功能，仅用于降级显示括号，其生效取决于ruby结构正确性和浏览器支持度；必须严格嵌套在rt内、内容仅为纯括号、且需配合ruby容器才能实现兼容性fallback。
rp 标签本身不提供功能，只提供降级显示；它是否生效，完全取决于 ruby 结构是否写对、浏览器是否识别 ruby，而不是靠 rp 自身“启用”兼容性。
为什么 rp 在某些浏览器里不显示括号
常见现象是：在 Chrome 或 Safari 里写了 <rp>(</rp>，但老浏览器（如 IE8）却没看到括号——根本原因是结构非法，浏览器直接忽略整个 rp。
-
rp必须严格嵌套在rt内部，不能放在rt外面，例如<rt><rp>(</rp>hàn<rp>)</rp></rt>是合法的；<rp>(</rp><rt>hàn</rt><rp>)</rp>是非法的，多数旧浏览器会丢弃这两个rp - 内容必须是纯括号字符（如
(、)、[、]），不能带空格、换行或任何其他文本，否则会被当作无效内容跳过 - IE8 及更早版本根本不解析
rp，哪怕结构正确也无括号——这不是 bug，是标准不支持，得靠 JS 检测后手动插入括号
ruby + rt + rp 的最小合法结构
没有 rt，rp 就失去上下文；没有正确包裹关系，降级就失效。最简可用结构长这样：
<ruby>汉<rt><rp>(</rp>hàn<rp>)</rp></rt></ruby>
-
ruby是唯一容器，不能省略 -
rt必须紧跟被注音文字（不能隔span、换行或空格），且必须存在 -
rp必须成对出现，且都位于rt开始与结束标签之间 - 不推荐用
rb包裹基字——现代浏览器能自动识别首个文本节点，加了反而增加 DOM 深度，且 IE8 对rb完全无视
Chrome/Safari 对 rp 的渲染异常处理
部分 Chrome 版本（尤其是 110–125）和 iOS Safari 会把 rp 当作普通内联元素渲染，导致括号出现在注音文字前后而非上标区域外侧，视觉混乱。
- 临时解法是用 JS 在 DOM 加载后移除
rp：document.querySelectorAll('rp').forEach(el => el.remove()) - 更稳妥的做法是服务端判断 UA，对已知有问题的 UA（如
Chrome/1[1-2][0-9]）直接不输出rp标签，改用 CSS fallback（例如给rt加::before和::after伪元素） - 注意：不要用
font-size: 70%直接设rt，不同浏览器缩放基准不一致，容易错位；改用line-height: 1+vertical-align: top更可控
真正麻烦的不是怎么写 rp，而是你得同时满足三件事：结构合法、浏览器识别 ruby、旧 UA 能 fallback 到括号——其中任意一环断掉，rp 就只是个被忽略的空标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
