rp标签必须严格嵌套在rt内且内容仅为纯括号，否则旧浏览器直接忽略；ie8及更早版本根本不支持rp，需js手动降级；结构非法是括号不显示的主因。
ruby 标签必须配 rt，否则注音完全不显示；rp 不是“加括号就完事”，它只在结构合法且浏览器不支持 ruby 时才可能生效——多数失效案例，问题出在嵌套位置或内容违规。
为什么写了 rp 却看不到括号
常见现象：代码里明明写了 <rp>(</rp>，但在 IE8 或旧版 WebView 中仍无括号显示。根本原因不是浏览器太老，而是结构非法，导致浏览器直接忽略整个 rp 元素。
-
rp必须严格嵌套在rt开始与结束标签之间，例如：<rt><rp>(</rp>hàn<rp>)</rp></rt>是合法的；而<rp>(</rp><rt>hàn</rt><rp>)</rp>是非法的，旧浏览器会丢弃这两个rp -
rp内容必须是纯括号字符（如(、)、[、]），不能含空格、换行、全角符号或任何字母数字——哪怕多一个半角空格，部分浏览器就跳过渲染 - IE8 及更早版本根本不识别
rp标签，无论结构多规范，都不会显示括号；这不是 bug，是标准未实现，需靠 JS 检测后手动插入
ruby + rt + rp 的最小合法结构
没有 rt，rp 就失去上下文；没有正确包裹关系，降级就失效。最简可用结构必须同时满足三项：
-
ruby是唯一外层容器，不可省略 -
rt必须紧跟被注音文字（不能隔span、换行或空格），且必须存在 -
rp必须成对出现，且都位于rt开始与结束标签之间，例如：<ruby>汉<rt><rp>(</rp>hàn<rp>)</rp></rt></ruby>
Chrome/Safari 对 rp 的异常渲染怎么处理
部分 Chrome（110–125）和 iOS Safari 会把 rp 当作普通内联元素渲染，导致括号出现在注音文字前后而非上标区域外侧，视觉混乱。
- 临时解法：DOM 加载后用 JS 移除
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
