必须用标签而非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> ❌（后续所有文字都会被当上下标）
• C₆H₁₂O₆ ✅；C₆H₁₂O₆ ❌（语义断裂，“1”和“2”变成两个独立下标，渲染错位）
• Ca₃(PO₄)₂ ✅；Ca₃(_PO4)₂ ❌（括号不是下标内容，不该被 sub 包）
• 2H₂ + O₂ ✅；₂H₂ ❌（前面的“2”是反应系数，普通数字）

多个 sub 连续出现时高度不齐，怎么办

像 Fe₂(SO₄)₃·9H₂O 这种结构，“4”和“3”看起来不在同一水平线——这不是 bug，是每个 sub 按自身基线对齐的正常行为。

Aidge

Aidge是一款由阿里巴巴国际提供的跨境电商 AI 经营与素材优化平台。

下载

• 别单独调 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 导出工具直接跳过
• 真需要 a_i^j 那种复合效果（aᵢʲ），sub/sup 不支持，得切 MathML 或 KaTeX

真正难的不是写出 H₂O，而是它在暗色模式、200% 缩放、等宽字体、JAWS/NVDA 朗读、wkhtmltopdf 导出这五种场景里，都得保持语义不丢、位置不飘、读音不错。