必须用<sub>标签而非vertical-align：H2O语义正确、读屏器读“下标2”、导出与SEO友好；常见错误包括未闭合、拆分多位数（如H12）、误包括号或系数；多下标对齐不齐时应统一CSS类调控。
必须用 sub 标签，别碰 vertical-align
想让“2”在 H₂O 里乖乖蹲在 O 左下角？直接写 H<sub>2</sub>O 就行。浏览器原生支持，语义对、读屏器能读出“下标2”、PDF 导出不丢、搜索引擎能理解这是化学式——而 vertical-align: sub 只是视觉错觉：不同字体下偏移量浮动（Roboto 和系统 sans-serif 的“2”可能差 2px），等宽字体里甚至完全错位，且 CMS 富文本编辑器常默认过滤掉该样式。
sub 标签的闭合和包裹范围不能错
常见错误不是不会写，而是闭合漏了或拆太碎：
-
<sub>2</sub>✅；<sub>2</sub>❌（后续所有文字都会被当上下标） - C6H12O6 ✅；C6H12O6 ❌（语义断裂，“1”和“2”变成两个独立下标，渲染错位）
- Ca3(PO4)2 ✅；Ca3(PO4)2 ❌（括号不是下标内容，不该被
sub包） - 2H2 + O2 ✅；2H2 ❌（前面的“2”是反应系数，普通数字）
多个 sub 连续出现时高度不齐，怎么办
像 Fe2(SO4)3·9H2O 这种结构，“4”和“3”看起来不在同一水平线——这不是 bug，是每个 sub 按自身基线对齐的正常行为。
- 别单独调
font-size，容易叠加下沉过深 - 推荐加统一类名：
<sub class="chem">2</sub>，再配 CSS：sub.chem { font-size: 0.72em; vertical-align: baseline; transform: translateY(0.12em); } - 如果父容器是
display: flex或grid，vertical-align直接失效，必须外包一层span或只用transform
电荷、负号、多级上标这些坑在哪
SO<sub>4</sub><sup>2−</sup> 看似简单，实则三处易翻车：
- “−” 别用减号
-，优先用 Unicode 上标负号⁻（U+207B）或实体⁻，否则读屏器可能误读为连字符 -
<sub><sup>x</sup></sub>是非法 HTML，校验失败，MathML 导出工具直接跳过 - 真需要 aij 那种复合效果（aᵢʲ），
sub/sup不支持，得切 MathML 或 KaTeX
真正难的不是写出 H2O，而是它在暗色模式、200% 缩放、等宽字体、JAWS/NVDA 朗读、wkhtmltopdf 导出这五种场景里，都得保持语义不丢、位置不飘、读音不错。
