HTML多音字标注失效怎么办？标签闭合检查方法-html教程-PHP中文网

根本原因是ruby结构不合法：必须显式包含rb（被注字）和rt（注音）且一一紧邻，缺一不可；混入span、br或未闭合标签会导致浏览器将其降级为普通内联元素，rt/rp全部失效。

html多音字标注失效怎么办？标签闭合检查方法

ruby 标签不渲染多音字注音，根本原因不是浏览器不支持，而是它被当成普通文本或结构破坏后直接丢弃——常见于未闭合、非法嵌套、或父容器限制内容模型。

浏览器对 ruby 的解析极其严格：它只在特定上下文里被识别为注音容器，一旦结构出错，就退化成无样式内联元素，rt 和 rp 全部失效且不报错。

ruby 必须直接包裹合法子元素：rb（被注字）+ rt（注音），rp 可选但必须成对出现；混入 span、br 或纯文本会中断解析
rb 和 rt 不能省略闭合：写成 行xíng 是合法的，但 行xíng（rb 没闭合）会导致整个 ruby 块被忽略
父级容器禁止内联内容时，ruby 会被静默截断——比如放在 p 外、或塞进 div 但该 div 的 CSS 设了 display: flex 且未设 flex-direction: column，部分浏览器会丢弃 rt
HTMLHint 默认不校验 ruby 结构，需手动加规则：在 .htmlhintrc 中启用 "ruby-pair": true（若插件支持），否则漏闭合只能靠人工盯

标准版 HTMLHint 不内置 ruby-pair 规则，但可通过自定义规则或升级到 html-validate（更现代的替代品）覆盖。当前最实操路径是：

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

确保项目已装 html-validate：npx html-validate --init 生成配置，然后在 .htmlvalidate.json 中开启 "no-missing-rb" 和 "no-missing-rt"
VS Code 中装 html-validate 插件，它会实时标出 汉字 这类无 rb/rt 的空壳结构
命令行快速扫一遍：npx html-validate "src/**/*.html" --rules 'no-missing-rb:error,no-missing-rt:error'
注意：不要依赖 tag-pair 规则查 ruby——它只管开闭匹配，不管语义合法性，xíng（缺 rb）也能过 tag-pair，但完全无效

Chrome 和 Safari 对 ruby 支持较稳，但 Firefox 仍存在两个关键兼容陷阱：

rt 内不能含块级元素：哪怕一个都会让整段注音塌陷为行内文字，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 替换过程中，可能因解析中断而丢失