“重”字标成zhòng而非chóng，说明语境中应取“重要、分量大”义，读zhòng；若需标chóng，须确认词义为“重复、重新”，并检查HTML中结构是否合法、CSS未隐藏、lang="zh-CN"已正确设置。
浏览器里看到“重”字标成 zhòng 而不是 chóng 怎么办
多音字标注（如 <ruby><rb>重</rb><rt>chóng</rt></ruby>）显示异常，通常不是浏览器不支持 <ruby></ruby>，而是 DOM 结构被破坏或样式覆盖导致。先确认是否真渲染出了 <rt></rt> 节点：打开开发者工具 Elements 面板，搜索 <rt></rt>，看它是否出现在正确位置、是否被父元素 <ruby></ruby> 包裹、有没有被 CSS 设为 display: none 或 visibility: hidden。
ruby 标签被浏览器自动“修复”了怎么办
常见诱因是嵌套违规 —— 比如把 <ruby></ruby> 放在 <p></p> 里又夹了个 <div>，或者 <code><rb></rb> 外漏写了文本。浏览器解析时会强制闭合 <p></p>，导致 <ruby></ruby> 被挤到段落外、<rt></rt> 孤立或变成灰色斜体节点。
-
<p>今天<ruby><rb>重</rb><rt>chóng</rt></ruby>新学习</p>✅ 合法 -
<p>今天<ruby><rb>重</rb><rt>chóng</rt></ruby>，</p> <div>说明</div>重新学习<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>❌ 触发<p></p>提前闭合，<ruby></ruby>被移出
用 Elements 面板检查节点缩进和颜色：灰色斜体 = 浏览器纠错痕迹，必须回溯上层标签找未闭合或错嵌套。
rt 文字太小/位置偏移/没对齐汉字怎么调
默认 <rt></rt> 渲染依赖浏览器 UA 样式，Chrome 和 Safari 表现差异大，且容易被全局 font-size 或 line-height 拉垮。不要靠猜，直接查 computed styles：
- 右键
<rt></rt>→ “Inspect”，在 Styles 面板看font-size是否被继承为 12px 或更小 - 检查
<ruby></ruby>的ruby-position（默认是over），若要下方标注，得显式写ruby-position: under - 避免用
vertical-align: top/middle直接调<rt></rt>，应作用于<ruby></ruby>容器 - 加一行重置：
ruby { ruby-position: over; } rt { font-size: 0.6em; line-height: 1; }
lang 属性写错导致拼音读成英文音节
屏幕阅读器是否按中文规则读 <rt></rt>，取决于整个上下文的计算语言值。如果 漏了，或某层 <section lang="en"></section> 把 <ruby></ruby> 包进去了，NVDA 或 VoiceOver 就可能跳过拼音、直接读汉字或按英文拼读。
验证方法：Elements 面板里右键 <rb></rb> 文字 → “Reveal in Elements panel”，逐级往上点，直到找到最近一个带 lang 的祖先。确保它不是 lang="en"，也不是空值或非法值（如 lang="ch"）。
最常被忽略的是：动态切换语言时只改了 document.documentElement.lang，但忘了同步更新当前 <ruby></ruby> 所在区域的局部 lang 属性，尤其在 Vue/React 的片段渲染中。
