根本原因是ruby结构不合法：必须显式包含rb（被注字）和rt（注音）且一一紧邻，缺一不可；混入span、br或未闭合标签会导致浏览器将其降级为普通内联元素，rt/rp全部失效。
ruby 标签不渲染多音字注音，根本原因不是浏览器不支持，而是它被当成普通文本或结构破坏后直接丢弃——常见于未闭合、非法嵌套、或父容器限制内容模型。
为什么 ruby 标签写了却没显示注音
浏览器对 ruby 的解析极其严格：它只在特定上下文里被识别为注音容器，一旦结构出错，就退化成无样式内联元素，rt 和 rp 全部失效且不报错。
-
ruby必须直接包裹合法子元素：rb（被注字）+rt（注音），rp可选但必须成对出现；混入span、br或纯文本会中断解析 -
rb和rt不能省略闭合：写成<rb>行</rb><rt>xíng</rt>是合法的，但<rb>行<rt>xíng</rt></rb>（rb没闭合）会导致整个ruby块被忽略 - 父级容器禁止内联内容时，
ruby会被静默截断——比如放在p外、或塞进div但该div的 CSS 设了display: flex且未设flex-direction: column，部分浏览器会丢弃rt - HTMLHint 默认不校验
ruby结构，需手动加规则：在.htmlhintrc中启用"ruby-pair": true（若插件支持），否则漏闭合只能靠人工盯
用 HTMLHint 检查 ruby 闭合是否可靠
标准版 HTMLHint 不内置 ruby-pair 规则，但可通过自定义规则或升级到 html-validate（更现代的替代品）覆盖。当前最实操路径是：
- 确保项目已装
html-validate：npx html-validate --init生成配置，然后在.htmlvalidate.json中开启"no-missing-rb"和"no-missing-rt" - VS Code 中装 html-validate 插件，它会实时标出
<ruby>汉字</ruby>这类无rb/rt的空壳结构 - 命令行快速扫一遍：
npx html-validate "src/**/*.html" --rules 'no-missing-rb:error,no-missing-rt:error' - 注意：不要依赖
tag-pair规则查ruby——它只管开闭匹配，不管语义合法性，<ruby><rt>xíng</rt></ruby>（缺rb）也能过tag-pair，但完全无效
ruby 在不同浏览器里的渲染差异点
Chrome 和 Safari 对 ruby 支持较稳，但 Firefox 仍存在两个关键兼容陷阱：
立即学习“前端免费学习笔记（深入）”；
-
rt内不能含块级元素：哪怕一个<span style="display:block"></span>都会让整段注音塌陷为行内文字，Firefox 尤其敏感 - 字体 fallback 不一致：
rt默认继承父级字体，若正文字体不支持拼音排版（如某些中文字体缺拉丁字重），Chrome 可能自动 fallback，Firefox 则留白——必须显式设rt { font-family: system-ui, sans-serif; } - 响应式缩放下
rt容易错位：不是 bug，是规范允许的“可忽略渲染”，解决办法是加ruby { ruby-position: over; }强制统一位置，再配合rt { line-height: 1; }控制垂直对齐 - 动态插入时必须等
loadedmetadata后再操作？不适用——ruby是纯 DOM 渲染，JS 插入后立即生效，但若插入时机在document.write()或 innerHTML 替换过程中，可能因解析中断而丢失
真正卡住多音字标注的，往往不是语法错误，而是 rb 和 rt 的层级关系被父容器或 CSS 意外切断——检查时优先看 Elements 面板里 rt 节点是否存在，而不是只盯着控制台有没有报错。
