ruby 和 rt 必须配合 rb 才能正确渲染拼音，漏掉 rb 或结构错误会导致浏览器忽略注音或平铺显示；现代浏览器要求每个汉字用单独 rb 包裹，rt 紧跟对应 rb，多字需逐字拆分，禁用破坏流式布局的 css。
ruby 和 rt 不是“加个标签就能出拼音”的快捷工具，必须配合 rb 才能稳定渲染；漏掉 rb 或结构错位，多数浏览器会直接忽略注音，或把拼音平铺在汉字后面。
为什么写了 ruby + rt 却不显示拼音？
常见原因是没写 rb ——现代浏览器（包括 Chrome 120+、Firefox 125+、Safari 17+）已要求显式包裹基字。只写 <ruby>汉<rt>hàn</rt></ruby> 是无效结构，会被降级为纯文本“汉hàn”。
-
rb必须存在，且每个被注音汉字都要单独包裹：<rb>汉</rb><rt>hàn</rt> -
rt必须紧跟对应rb，不能跨rb混用，也不能放在rb外面 - 父容器若设了
line-height: 1或overflow: hidden，rt很容易被裁掉或压进基字里
多字注音必须逐字拆开，不能偷懒合写
像“苹果”写成 <ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby> 才可靠；塞进一个 rb 里（如 <rb>苹果</rb><rt>píng guǒ</rt>）会导致拼音整体浮在两字上方，换行、缩放、字体变化时极易错位。
- 地名、多音字（如“重庆”读
chóng qìng）必须按字控制，ruby不会自动识别语境 - 中文混排数字/英文时更危险，例如「第123页」——
123若被折到下一行，其rt还挂在上一行末尾，视觉完全脱节 - 避免用空格分隔拼音：
<rt>píng guǒ</rt>改为<rt>píng</rt><rt>guǒ</rt>并各自配rb
CSS 调整必须克制，别动默认流式布局
浏览器对 ruby 的内置排版逻辑（如 rt 自动缩小、垂直定位）很精细，强行用 position: absolute 或 display: inline-block 会破坏可访问性，也让屏幕阅读器无法正确朗读“汉字, 拼音”顺序。
- 安全写法：
ruby { line-height: 1.8; }+rt { font-size: 12px; line-height: 1; } - 禁用
vertical-align相关设置，改用ruby { ruby-align: center; }控制水平对齐 - 想让拼音在下方显示（如方言训读），用
ruby { ruby-position: under; }，别手动翻转 - 不要给
ruby设white-space: nowrap——长注音超出容器时不会折行，反而造成横向溢出
兼容旧浏览器和无障碍的底线操作
IE ≤ 10、Android 4.3 WebView、Outlook Desktop 等环境完全不解析 ruby，但它们通常会把 rt 内容当普通文本渲染出来，变成“汉hàn”这种不可读形式。靠 rp 加括号只是辅助，真正要保底，得从数据层控制。
- 服务端或构建时若拼音为空，绝不能输出空
<rt></rt>——部分读屏软件会读“空白注音” - 需要支持老环境时，
rp必须严格嵌套在rt内：<rt><rp>(</rp>hàn<rp>)</rp></rt>，括号外不能有空格或文字 - 英文缩写、术语解释等场景请用
abbr[title]，ruby语义仅限东亚文字注音，滥用会导致 SEO 和无障碍审查失败
最常被忽略的是：连续多个 ruby 块在 Safari 中可能间距异常，微调时得用 font-size: 0 父容器 + 子元素重设字号，而不是硬调 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
