在前端注音（ruby 标注）开发中，最容易被忽视的便是 标签——它虽然不占据视觉空间，却直接决定了整个注音能否被正确解析、朗读和自动换行。先来看一个常见的踩坑场景。

rb 标签并非可选项，必须显式写出才能确保兼容性

很多开发者习惯写成 汉hàn，以为省略 是一种简写方式。结果在 Firefox 和 Safari 中， 会被直接忽略，仅显示“汉hàn”连在一起。Chrome 虽然能勉强渲染，但语义结构已经断裂——屏幕阅读器无法识别出“这是‘汉’的拼音”，而是将“汉”与“hàn”当作两个独立的词语处理。

真正有效的最小结构必须是：汉hàn。此处的 并非装饰性容器，而是承担着语义锚点的关键作用——它告诉浏览器“这段基文字是‘汉’，紧随其后的 是它的注音”。

• 内部必须为纯文本节点，或仅包含内联格式元素（例如 重 是可接受的）
• 不可嵌套块级元素（如

  、

  ），且不能包含空格或换行符

• 多字场景下，每个字需单独配置 + ，不可合并至一个 内

rb 与 rt 必须严格相邻，中间不可存在任何字符

看似无害的换行符、空格或零宽字符（例如 ​），都会导致浏览器判定结构断裂。来看一个例子：

重chóng

上述写法在 Chrome 120+ 中或许还能勉强渲染，但在 Safari 17+ 或 VoiceOver 环境下会直接跳过整个注音块——因为规范明确要求 与 必须是相邻的兄弟节点，中间不能插入任何文本节点。

• 正确做法：所有标签需写在同一行，或使用 HTML 注释分隔（重chóng）
• 不可使用 或全角空格代替，它们仍属于文本节点
• 若构建工具（如 Vue / React）自动添加换行，需配置模板压缩或使用 v-pre 指令避免插值干扰

rb 标签不支持嵌套结构，且不接受样式覆盖

有些开发者尝试给 添加 font-size 或 color 样式来突出基文字，结果发现样式无效甚至引发布局错乱。原因在于 是 ruby 布局模型中的“基线锚点”，浏览器会强制将其作为不可分割的语义单元处理。

• 在 上设置 display、margin、padding 会破坏自动对齐逻辑
• 如需调整基字大小，应直接修改父级 的 font-size， 会自动继承
• 如需强调某个字，应使用 包裹其内容（重），而非给 添加类名