sub标签是唯一能正确显示化学分子式下标的HTML方式，因其在语义、可访问性、PDF导出和跨字体渲染上不可替代，而vertical-align:sub等CSS方案在偏移量、屏幕阅读器识别、PDF工具支持及富文本过滤等方面均存在严重缺陷。
sub 标签是唯一能正确显示化学分子式下标的 HTML 方式，不是“能用”，而是“必须用”——其他手段在语义、可访问性、PDF 导出或跨字体渲染上都会失效。
为什么 vertical-align: sub 不能替代 sub 标签
视觉上凑合，但实际问题密集：
- 不同字体（如 Roboto vs 系统 sans-serif）下，
vertical-align: sub的偏移量浮动可达 2px 以上，导致 “₂” 在 H₂O 和 Ca₃(PO₄)₂ 中高度不一致 - 屏幕阅读器完全无视
vertical-align，把 Hspanstyle="vertical-align: sub">2O 读作 “H 2 O”，而非 “H 下标 2 O” - wkhtmltopdf 等 PDF 工具直接忽略该样式，导出后所有数字平排，化学式彻底失真
- CMS 或富文本编辑器常过滤掉未白名单的内联样式，
span+ style 保存时直接被清空
sub 标签的写法陷阱：看似简单，错一个字符就崩
语法极简，但几个细节直接决定是否可用：
- 必须闭合：
sub2 ✅，sub2 ❌（后续所有文字都会被当成下标） - 多位数要整体包裹：
Csub6Hsub12Osub6 ✅，Csub6Hsub1sub2Osub6 ❌（语义断裂 + 渲染错位） - 括号不参与下标：
Casub3(POsub4)sub2 ✅，Casub3(subPO4)sub2 ❌（括号本身不是下标内容） - 计量系数不是下标：
2Hsub2+ Osub2 ✅，sub2Hsub2 ❌（前面的 “2” 是反应系数，属普通数字）
多组 sub 连续出现时对齐不齐？别硬调 font-size
像 Fesub2(SOsub4)sub3·9Hsub2O 这类结构，“4” 和 “3” 看起来高度不一致——这不是 bug，是浏览器按各自基线对齐的结果。
- 不要给
sub单独设font-size：会叠加缩放，导致下沉过深或与上文基线错位 - 推荐加统一类名：
subclass="chem">2，再配 CSS：sub.chem { font-size: 0.72em; vertical-align: baseline; transform: translateY(0.12em); } - 避免在
flex或grid容器里直接对sub设vertical-align——它对这些display类型完全无效，必须外包一层span或改用transform
真正难的不是写出 Hsub2O，而是确保它在暗色模式、缩放 200%、等宽字体环境、PDF 导出、以及 JAWS/NVDA 各种朗读模式下，依然保持语义完整、位置稳定、读音准确。这些，只有原生 sub 标签能做到——别绕路。
