ruby 必须作为纯内联元素紧贴基字使用，不可嵌套于块级语义标签内部；其语义仅限注音，不参与文档结构或SEO，需避免任何打断内联流的样式或结构干扰。
ruby 标签不能和语义化标签“混用”来实现结构功能，它只负责发音语义，必须独立、精准嵌套在内联文本流中；强行塞进 header、nav 或 article 里不会出错，但一旦结构松动（比如加了 display: block），注音就失效或错位。
ruby 必须紧贴基字，不能被语义容器打断流式布局
ruby 是内联级语义容器，依赖浏览器的内联排版引擎对齐基字与拼音。只要中间插入块级元素、浮动、或显式设置 display: block / inline-block，就会切断 ruby 的锚定关系。
-
ruby必须是纯内联上下文：它应直接出现在段落p、标题h2、或span中，不能包裹在div里再塞进article—— 即便div只为样式，也会让 Safari 把rt渲染成行尾小字 - 常见翻车点：
<article><div class="content"><ruby><rb>汉</rb><rt>hàn</rt></ruby></div></article>—— 这个div没语义问题，但若 CSS 里写了.content { line-height: 1.8; }，Chrome 会把rt垂直撑开，而 Safari 直接忽略rt - 安全写法：把
ruby当作和em、strong同级的内联标记，直接写在语义标签的内容体里：<p>欢迎学习<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>排版</p>
ruby 不参与文档大纲，别指望它增强语义层级
ruby 的语义仅限于「这个字读什么」，不贡献标题层级、不生成导航节点、不被 outline 算法识别。把它放进 section 或 article 里，不会让该区块“更语义”，也不会提升 SEO 权重。
- 误用场景：
<section><h2>汉字教学</h2><ruby><rb>教</rb><rt>jiāo</rt></ruby></section>——ruby对section的语义无增益，反而可能因内部空格或换行导致 Safari 渲染异常 - 无障碍影响：屏幕阅读器会正确播报
<rb>教</rb><rt>jiāo</rt>为「教，读作 jiāo」，但不会因此把这段内容标记为“教学重点”或“术语定义” - 如果真需要强调术语，应组合使用：
<dfn><ruby><rb>教</rb><rt>jiāo</rt></ruby></dfn>——dfn提供定义语义，ruby补充读音，二者分工明确
多字注音时，ruby 与 article/nav 的边界必须清晰
一个 article 可以包含多个 ruby，但每个 ruby 必须自闭环合、不可跨语义块。例如地名“重庆”拆成两个 ruby，不能因为都在同一个 article 里就省略其中一个 rb 或共用 rt。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<article><ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby></article>看似 OK，但如果article上有text-align: justify，iOS Safari 可能对两个ruby分别计算字距，造成拼音水平偏移 - 缓解方案：给
article内所有ruby加统一父容器，如<span class="pinyin-group">...</span>，并设font-size: 0+ 子元素重设字号，避免字体度量差异放大错位 - 绝对禁止：
<nav><ruby><rb>首</rb><rt>shǒu</rt></ruby><a href="/">首页</a></nav>—— 导航链接和注音混在同一行内联流，部分安卓 WebView 会把rt当作普通文本渲染到链接右侧，破坏可点击区域
兼容性断点常藏在语义标签的默认样式里
像 header、nav、main 这些语义标签虽自带轻量默认样式（如 main 的 margin），但它们和 ruby 的交互极脆弱——尤其当浏览器对 ruby 的实现不一致时，这些默认值会放大渲染偏差。
- 典型问题：
main在旧版 Edge 中默认有margin-top: 2em，如果里面第一个子元素是ruby，Chrome 会把rt的上标位置基于这个 margin 计算，而 Safari 完全忽略，导致同一段拼音在两浏览器中垂直对齐差 4px+ - 解决路径不是删
main，而是重置关键继承属性：main ruby { line-height: 1; vertical-align: text-top; }，且避免依赖main的 margin 控制间距，改用padding或gap - 最易被忽略的一点：某些 CMS 输出的
article会自动包裹<p><br></p>，这种空段落会把后续ruby推到下一行，而rt在 Safari 中无法跨行对齐基字，直接消失
真正难的不是写出符合规范的 ruby，而是确保它始终处在不受干扰的内联流中——哪怕只加了一条 font-weight: bold 到父 section，都可能让 iOS Safari 的 ruby-position 计算失效。所以检查时别只看 DOM 结构，得打开 Accessibility 面板确认 rt 是否仍被识别为 “ruby text”，再切到不同设备真机验证对齐精度。
