ruby-align必须显式声明，因Safari≤16及旧Edge不实现默认center而回退到start，Firefox/Chrome在RTL或text-align:right下易被覆盖；rb不可省略，否则rt失去基线锚点导致对齐失效；font-size与line-height需协同设置，否则ruby-align无效。
ruby-align 在非 WebKit 浏览器（如 Firefox、旧版 Edge）下表现不一致，根本原因不是“不支持”，而是默认行为未被统一实现——Firefox 默认 ruby-align: center，但若父容器有 text-align: right 或 RTL 语言环境，该默认值会被覆盖；而旧 Edge 完全忽略 ruby-align，退回到 start。直接写 ruby-align: center 并不能兜住所有情况。
必须全局显式声明 ruby-align，不能依赖浏览器默认
多数人误以为 ruby-align: center 是默认值，写了等于没写。但 Safari ≤16 和部分旧 Edge 根本不实现该默认，会回退到 start，导致拼音贴左；Firefox/Chrome 虽默认 center，但一旦父元素设了 text-align: right 或 direction: rtl，未显式声明的 ruby-align 就会被覆盖。
- 在所有用到
ruby的 CSS 文件顶部第一行加：ruby { ruby-align: center; } - 不要只给某个 class 写，避免组件间样式污染（比如一个组件用了
text-align: right，另一个组件的ruby就失效） - 兼容 Safari 15.6（macOS 12.5）可补一句：
ruby { -webkit-ruby-align: center; }，虽已非必需，但保险
<rb></rb> 元素不可省略，否则 ruby-align 失效
写成 <ruby>汉<rt>hàn</rt></ruby> 看似简洁，实际在 Firefox 和旧 Edge 中，<rt> 会失去基线锚点，ruby-align 完全不生效——拼音可能飘在字左侧、右侧，甚至垂直偏移一整行。
- 每个汉字都必须包裹
<rb></rb>，单字也不省略 - 多字词如「苹果」，必须拆开：
<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby> - 用
pypinyin或正则生成 HTML 时，在插入<rt>前，确保每个 Unicode 字符都被<rb>包裹，不能靠字符串替换偷懒
font-size 和 line-height 不协同设置，ruby-align 就是摆设
ruby-align: center 只控制水平对齐，但拼音被截断、上下错位、行距撑开——这些视觉问题 90% 出在 font-size 和 line-height 没配对调。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 统一设
ruby { line-height: 1.2; }，避免继承外部段落过大行高 -
rt必须设font-size: 0.6em（不用50%，因各浏览器缩放比例不同），再加line-height: 1;防止自身行高干扰 - 别只调
rt { font-size: 0.5em; }却忽略父ruby的line-height，否则拼音会被挤压变形，居中无从谈起
iOS Safari 17.4 在 contenteditable 中需触发 GPU 渲染
当 ruby 放在可编辑区域（如富文本编辑器）里，iOS Safari 17.4 会出现拼音渲染错位或闪烁，原因是 contenteditable 容器未触发硬件加速。
- 给
contenteditable的父容器加transform: translateZ(0)，强制 GPU 渲染 - 仅针对 iOS Safari 17.4+ 有效，其他平台无需此 hack
- 不要滥用：只加在实际包含
ruby的可编辑块上，避免影响整体性能
真正容易被忽略的是 <rb></rb> 的强制包裹和 ruby 全局重置这两步——少了任意一个，ruby-align 在非 WebKit 浏览器里就形同虚设，且问题往往只在特定设备或 RTL 场景下才暴露。
