根本原因是Safari对ruby的display计算逻辑不同，须加ruby { display: ruby; }强制识别，并配合重置font-size、line-height和text-align等CSS样式。
ruby标签在Safari iOS上注音错位或不显示怎么办
根本原因不是“不支持”，而是 Safari 对 ruby 的 display 计算逻辑与其他浏览器不同，尤其在 iOS WebView 或旧版 Safari（ruby 容器默认未被识别为 ruby 流式容器，导致 rt 脱离基字定位，甚至渲染为普通行内文本。
必须显式声明：ruby { display: ruby; }。这个声明在 Chrome/Firefox 中也有效，但 Safari 离不开它。仅靠 font-size 或 line-height 无法触发其内置排版引擎。
- 不要用
display: inline-block或position: relative包裹ruby——会切断基字与注音的语义绑定 - 避免在
ruby外层加transform: scale()，iOS Safari 会丢失rt垂直对齐基准 - 如果使用了
lang="zh-CN"，确保它写在<html>标签上，而非局部div，否则 Safari 可能忽略东亚排版优化
Chrome Android下拼音字体过小或截断怎么调
Android Chrome（尤其是 120–128 版本）对 rt 有硬性最小字号限制（通常 12px），且默认 line-height 过大会撑开行距，导致拼音被父容器 overflow: hidden 截断。
关键 CSS 组合必须同时生效：ruby rt { font-size: 0.65em; line-height: 1; vertical-align: top; }。注意：vertical-align: top 比 middle 更稳定，可规避部分机型因行高计算误差导致的上浮偏差。
立即学习“前端免费学习笔记（深入）”；
- 禁用
-webkit-text-size-adjust: none——它会干扰系统字体缩放，反而让注音在用户放大文字时消失 - 给包含
ruby的段落加white-space: nowrap，防止换行撕裂“字-音”对应关系 - 不要用
em单位以外的绝对单位（如px）设rt字号，否则响应式缩放失效
Firefox桌面端rt显示为灰色平铺文字怎么办
Firefox 默认将 rt 渲染为 color: gray + font-size: 0.5em + vertical-align: super，但它不自动居中，也不强制上标位置对齐基字中心，结果就是拼音偏右、发虚、像后缀而非注音。
必须重置三项：color、vertical-align、text-align。仅改 font-size 不解决问题。
ruby rt { color: #333; vertical-align: middle; text-align: center; }- 额外加
ruby { ruby-align: center; }——Firefox 仍需此属性激活水平居中逻辑 - 避免用
margin微调位置，Firefox 会将其叠加到已有偏移上，造成不可预测错位
老旧安卓 WebView或微信内置浏览器如何兜底
多数微信安卓版（8.0.50 以下）、QQ 浏览器 X5 内核（v4.3.x）、以及部分国产厂商定制 WebView（如华为 EMUI 12 内置）根本不解析 ruby，直接把 rt 当作普通子节点渲染在汉字后面，形成“汉字拼音”连排效果。
不能依赖 JS 检测 ruby 支持再动态插入——这些环境连 document.createElement('ruby').tagName 都返回 undefined。唯一可靠方式是服务端或构建时预生成双轨结构：
- 用
pinyin-pro输出带 class 的 HTML：<span class="py-item"><span class="py-base">汉</span><span class="py-phonetic">hàn</span></span> - CSS 控制：当
ruby不可用时，降级为.py-phonetic { font-size: 0.7em; position: relative; top: -0.3em; } - 不依赖
rp标签做 fallback——这些环境同样不识别rp，且现代浏览器已无需它
最易被忽略的是：所有兼容性修复都建立在「每个字独立一个 ruby」的基础上。把“你好”塞进一个 ruby 里配一个 rt，等于主动放弃所有平台的正确渲染可能。
