ruby标签是语义化标注发音的容器，非排版工具；须每个字单独包裹ruby，基字与rt一一对应，配合CSS重置样式并注意iOS兼容性。
ruby 标签不是用来“加拼音”的，而是语义化标注发音的容器
很多人一上来就用 ruby 套 rt 写拼音，结果在 Safari 或旧版 Edge 里显示错位、字体变小、甚至完全不渲染——问题常出在语义误用或缺少必要结构。HTML 的 ruby 本质是为东亚文字（如日文假名、中文注音）提供「注解文本」的语义容器，不是排版工具。它必须包裹被注释的基字（rb 或普通内联文本），否则浏览器可能忽略 rt 内容。
正确写法要满足：一个 ruby 元素内，有且仅有一个基字内容（可为纯文本或 rb），搭配一个 rt；多字需用多个 ruby 并列，不能把所有拼音塞进一个 rt 里。
- ✅ 正确：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>
- ❌ 错误：
<ruby>汉字<rt>hàn zì</rt></ruby>
（基字为两个字符，rt无法对齐） - ⚠️ 注意：
rb标签虽可显式声明基字，但 IE 和部分安卓 WebView 不支持；稳妥起见，直接用纯文本作基字更兼容
rt 标签默认样式在不同浏览器中差异很大
rt 在 Chrome/Firefox 中默认是小号、上标、灰色，但在 Safari 中可能不缩放、不居中，甚至垂直偏移异常。这不是 bug，而是规范允许浏览器自行实现渲染逻辑。想统一效果，必须重置 CSS。
- 必须覆盖的样式：
font-size（建议设为0.6em～0.75em）、line-height（避免行距过大撑开）、text-align（确保居中） - 关键修复项：
ruby rt { font-size: 0.7em; line-height: 1; text-align: center; } - 额外兼容处理：Safari 对
ruby的display计算有偏差，加ruby { display: ruby; }可强制识别（Firefox/Chrome 也认） - 不要用
vertical-align: super—— 它会让rt相对于行高偏移，而非相对于基字
中文注音场景下，ruby 不适合做“整句拼音”或带声调符号的复杂标注
如果需求是给整段古诗加逐字拼音（含声调）、或需要自动匹配轻声/变调规则，ruby + rt 就力不从心了。它不解析拼音语义，也不支持动态声调定位；手动写 rt 意味着每个字都要硬编码，维护成本高，且无法响应字体缩放或阅读器朗读（多数屏幕阅读器跳过 rt）。
立即学习“前端免费学习笔记（深入）”；
- 适合场景：静态、少量、人工校对过的单字/词注音（如教材生字表、辞典词条）
- 不适合场景：自动生成拼音、需要语音合成（TTS）支持、要兼容无障碍访问（ARIA）
- 替代方案参考：用
span+ ARIA 属性（如aria-label="hàn"）兼顾可访问性；或用 JS 库（如pinyin-pro）生成后再套ruby结构 - 声调符号注意：
hàn中的à是 Unicode 字符，不是 HTML 实体，直接写即可；但若后端过滤了 Unicode，得确认是否被转义成à等，否则显示异常
移动端 iOS Safari 的 ruby 渲染有隐藏限制
iOS 15+ 虽支持 ruby，但当父容器设置了 font-size: smaller 或使用某些 WebKit-only 字体（如 -apple-system）时，rt 可能消失或尺寸归零。这不是 CSS 写错了，而是 WebKit 对嵌套相对单位的计算缺陷。
- 规避方法：对
ruby设置固定font-size（如16px），再让rt用em缩放，而不是全链路用rem或% - 测试必做：真机打开，开启「显示放大字体」辅助功能，看
rt是否仍可见 —— 很多问题只在此模式下暴露 - 底线方案：iOS 上降级为「汉字（拼音）」格式（如
<span>汉（hàn）</span>），用媒体查询检测@supports (display: ruby)再启用ruby
ruby 当成「自动排版工具」来用，而没意识到它本质是个语义开关：开对了，辅助技术与现代浏览器才愿意配合；开错了，连 Safari 都可能静默失败。 
