ruby拼音重叠主因是rt的font-size与父级line-height未协同：需设rt { font-size: 0.6em; line-height: 1 }，ruby容器line-height至少1.8，且rb不可省略、ruby-align须显式声明并全局重置。
ruby拼音重叠是因为line-height和font-size没协同设置
拼音贴在汉字上、上下挤成一团，根本不是浏览器“不支持”，而是rt的font-size和父级ruby或段落的line-height冲突了。Chrome/Firefox/Safari 默认对rt不设行高，一旦外层line-height太小（比如1.2），拼音就会被硬生生压进基字高度里。
必须同步控制两处：
-
rt自己要设font-size: 0.6em（别用50%，各浏览器缩放行为不一致） -
rt还得加line-height: 1，否则 Firefox 会按父级行高拉伸拼音 - 包裹
ruby的容器（比如p或div）设line-height: 1.8起手，至少比汉字字号大 0.6 - 禁用
ruby { line-height: 1 }——这会让整个注音块失去垂直空间，直接触发重叠
rb缺失会导致Safari中拼音错位甚至飘到字左侧
写成<ruby>汉<rt>hàn</rt></ruby>在 Chrome 可能勉强显示，但在 Safari 16.4+ 和多数 iOS WebView 中，rt会失去基线锚点，ruby-align: center完全失效，结果就是拼音左贴、右悬、或垂直偏移一整行。
真正可靠的结构是显式写出rb：
立即学习“前端免费学习笔记（深入）”；
- 每个汉字必须包一层
<rb>汉</rb>，单字也不能省 -
rb和rt必须一一对应、顺序严格：先rb，紧接rt，不能换行、不能插空格 - 多字如「重庆」得拆成
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，共用rt会丢音
ruby-align不生效的三个隐藏原因
明明写了ruby { ruby-align: center }，拼音还是靠左？不是 CSS 没加载，而是下面任一条件不满足：
-
rb元素缺失——没有基字锚点，ruby-align无对象可对齐 - 父容器有
text-align: right或direction: rtl，且未在ruby上显式覆盖ruby-align -
rt的font-size或line-height异常，导致浏览器放弃内置排版逻辑，退化为普通内联流
实操建议：所有项目起步就加全局重置ruby { ruby-align: center; -webkit-ruby-align: center; }，别等出问题再补。
rp标签漏写或错位会让旧环境拼音堆在字后面
在 Android 4.3 WebView 或 Outlook 邮件客户端里，如果只写<ruby><rb>你</rb><rt>nǐ</rt></ruby>，rt会被当普通文本渲染，结果变成「你nǐ」连在一起，完全不可读。
rp不是装饰，是 fallback 开关：
- 必须成对：
<rp>( </rp><rt>nǐ</rt><rp>)</rp>，括号内容只能是纯符号，不能有空格或中文标点 -
rp必须紧邻rt，顺序不能颠倒（左括号在前） - 现代浏览器自动隐藏
rp，只显示拼音；老环境则显示「你(nǐ)」，保持可读性
最易忽略的是：即使项目声明不兼容 IE，也要检查 CMS 输出、邮件模板、PWA 离线缓存这些下游环节是否真绕过了旧 UA。
