ruby-align必须显式声明，否则safari 16及更早版本回退至start导致拼音左贴汉字，firefox在rtl或text-align:right下也会覆盖隐式值；rb不可省略，否则rt失去基线锚点致对齐失效且屏幕阅读器跳过拼音；font-size与line-height需协同设置，否则ruby-position无效；中英文混排时须用white-space:nowrap包裹整个注音片段防断行脱节。
ruby-align 必须显式声明，否则 Safari 和 Firefox 会错位
很多人以为 ruby-align: center 是默认行为，结果在 Safari 16 或 Firefox 中拼音左贴汉字、甚至飘到字外。这不是 bug，是浏览器实现差异：Safari 16 及更早版本压根不实现默认 center，Firefox 在 RTL 或 text-align: right 下也会覆盖掉隐式值。
实操建议：
- 所有用到
ruby的 CSS 文件里，第一行就写ruby { ruby-align: center; } - 补一句
ruby { -webkit-ruby-align: center; }兼容 macOS 12.5（Safari 15.6）及更旧 WebView - 别只给某个 class 设，全局重置，避免组件间样式污染
rb 标签不可省略，否则 ruby-align 失效且语音朗读异常
写成 <ruby>汉<rt>hàn</rt></ruby> 看似简洁，但 Safari 和旧 Edge 中 rt 会失去基线锚点——ruby-align 完全不生效，拼音可能垂直偏移一整行；屏幕阅读器（如 VoiceOver）也可能只读“汉”，跳过拼音。
原因在于：rb 明确标出被注音的基字，浏览器靠它计算宽度和 baseline，才能把对应 rt 居中对齐。没有 rb，rt 就是“无主注音”。
实操建议：
- 每个汉字都必须套
<rb></rb>，单字也不省略 - 两字词如「苹果」，必须写成
<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby>
- 用正则或 pinyin-pro 生成时，确保每个汉字字符都被
rb 包裹，不能靠字符串替换偷懒
line-height 和 font-size 不协同设置，ruby-position 就是摆设
ruby-position: over 看起来很理想，但若 ruby 的 line-height 过大或 rt 的 font-size 用百分比，拼音会被上下挤压、截断，甚至和下一行文字重叠。根本原因是不同浏览器对 50% 缩放的理解不一致，而 line-height 继承混乱会直接破坏 ruby 内联布局的 baseline 计算。
实操建议：
- 统一设
ruby { line-height: 1.8; font-size: 1em; }，撑开空间，防止拼音贴底 -
rt { font-size: 0.6em; line-height: 1; ruby-position: over; }—— 用固定 em 值，不用% - 禁用
margin-top: -0.5em拉高拼音：字号缩放或字体切换时极易偏移失准
中英文混排与数字场景下的断行脱节问题
像「第123页」加注音，如果写成连续多个 ruby，窄屏下「123」可能折到下一行，但拼音还挂在上一行末尾，视觉完全脱节。这不是 HTML 错误，而是浏览器对内联元素断行策略不同导致的渲染分裂。
实操建议：
- 给整个注音片段加
white-space: nowrap，但仅作用于含ruby的内联容器，不影响段落换行 - 对数字/英文
rb（如<rb>123</rb>），也补<rp>(</rp><rt>yī èr sān</rt><rp>)</rp>—— 不为兼容 IE，而是让部分安卓 WebView 把括号+拼音当整体处理，减少断行撕裂 - 避免在
rb里塞空格或全角标点；如需分隔，用零宽空格替代普通空格
rb，ruby-align 就失效；改用 % 设 font-size，ruby-position 在不同设备上就会偏移；不控 white-space，中英文混排时注音就容易脱钩。它们必须一起配对调整，缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
