ruby 必须作为纯内联元素紧贴基字使用，不可嵌套于块级语义标签内部；其语义仅限注音，不参与文档结构或seo，需避免任何打断内联流的样式或结构干扰。
ruby 标签不能和语义化标签“混用”来实现结构功能，它只负责发音语义，必须独立、精准嵌套在内联文本流中；强行塞进 header、nav 或 article 里不会出错，但一旦结构松动（比如加了 display: block），注音就失效或错位。
ruby 必须紧贴基字，不能被语义容器打断流式布局
ruby 是内联级语义容器，依赖浏览器的内联排版引擎对齐基字与拼音。只要中间插入块级元素、浮动、或显式设置 display: block / inline-block，就会切断 ruby 的锚定关系。
-
ruby必须是纯内联上下文：它应直接出现在段落p、标题h2、或span中，不能包裹在div里再塞进article—— 即便div只为样式，也会让 Safari 把rt渲染成行尾小字 - 常见翻车点：
@#@#@#@#@#@#@#@#@#@0—— 导航链接和注音混在同一行内联流，部分安卓 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”，再切到不同设备真机验证对齐精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
