Ruby标签本身不解决字符重叠，真正防止拼音与汉字视觉重叠的是配套CSS控制，需协同设置font-size、line-height和ruby-align，并显式声明ruby-align: center、合理设置<rb>、避免合并注音及滥用<rp>。
ruby 标签本身不解决字符重叠，它只提供注音结构；真正防止拼音与汉字视觉重叠的，是配套的 CSS 控制 —— 尤其是 font-size、line-height 和 ruby-align 的协同设置。
为什么直接写 <ruby>汉<rt>hàn</rt></ruby> 会导致拼音压在字上
浏览器对 <rt> 的默认渲染极简：font-size 接近 100%，line-height 未预留垂直空间，且无基线锚点。结果就是拼音和汉字共享同一行高，上下挤成一团。
- 必须显式给
<rt>设font-size: 12px（不用百分比，避免各浏览器缩放不一致） -
<ruby>父容器需设line-height: 1.8或更高，留出拼音上方空白 - 漏掉
<rb>会导致<rt>失去定位基准，ruby-align完全失效
ruby-align: center 必须显式声明，不能依赖默认值
Safari 16 及更早版本根本不实现 ruby-align 默认行为，会退回到 start，导致拼音左贴汉字；Chrome/Firefox 在 text-align: right 或 RTL 环境下也容易被覆盖。
- 全局 CSS 中第一行就加：
ruby { ruby-align: center; -webkit-ruby-align: center; } - 仅对某个 class 设置不够，组件间样式易污染
- 若用在
contenteditable区域（如 iOS Safari 17.4），还需加transform: translateZ(0)触发 GPU 渲染，否则对齐跳动
多字注音必须逐字拆开，禁用合并写法
把“苹果”写成 <ruby><rb>苹果</rb><rt>píng guǒ</rt></ruby> 表面省事，实则埋雷：换行时拼音整体飘走，缩放后宽度失配，对齐彻底失控。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是：
<ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby> - 混排英文/数字时，只给汉字套
<rb>：<ruby><rb>第</rb><rt>dì</rt></ruby>123<ruby><rb>页</rb><rt>yè</rt></ruby> - 动态生成时，别用字符串替换偷懒；要用正则或 pypinyin 后处理，确保每个汉字都被
<rb>包裹，且<rt>紧贴其后
旧浏览器 fallback 要靠 <rp>，但别滥用
IE8–9 不识别 <rt>，需用 <rp> 提供括号包裹 fallback，如 <ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>。但现代浏览器已无需此结构，滥用反而增加 DOM 复杂度和维护成本。
- 只在明确支持 IE8–9 的项目中启用
<rp> - 不要用
<rp>替代<rt>（如<ruby>汉<rp>hàn</rp></ruby>），这不会触发注音渲染 - 注意
<rp>内容在现代浏览器中默认隐藏，但若 CSS 错误显示出来，会破坏语义
最常被忽略的点是：所有样式必须同时生效——ruby-align 控水平，font-size + line-height 控垂直，<rb> 是三者共同的前提。少一个，拼音就可能错位、裁剪或消失。
