标签是唯一能正确表达下标语义的HTML方式，它向浏览器、屏幕阅读器等传递语义，而CSS仅改视觉；常见渲染异常源于外层样式覆盖、line-height过小、XSS过滤清空标签或语法错误（如未闭合、分拆多位数）。
sub 标签是唯一能正确表达下标语义的 HTML 方式，不是“可用可不用”的选项。它让浏览器、屏幕阅读器、PDF 导出工具和搜索引擎都明白：“这个数字属于前一个字符的下标”，而 CSS 模拟（如 vertical-align: sub）只改位置，不传含义——一旦遇到富文本过滤、暗色模式缩放或语音朗读，立刻失效。
为什么 sub 渲染出来“看不见”或位置歪了
常见原因不是标签写错了，而是被外层样式悄悄覆盖了：
- 全局 CSS 重置了
sub的vertical-align，比如某些 UI 框架写了sub { vertical-align: baseline; }，直接抵消原生下标偏移 -
line-height设得太小（如1.0），导致下标被父容器截掉下半部分；建议设为line-height: 1.3或更高 - CMS 或富文本编辑器后端 XSS 过滤没放行
，保存后只剩纯文本 “2”，标签被清空
sub 必须成对闭合，且不能跨字符乱包
语法极简，但错一个符号就全乱：
-
2✅ 正确；2❌ 单标签会让后续所有文字都被当上下标 -
C6H12O6✅ 多位数必须整体包裹；C6H12O6❌ 语义断裂，“1” 和 “2” 分开下标，渲染错位 -
Ca3(PO4)2✅ 括号是普通文本，括号内容整体下标；Ca3(PO4)2❌ 把括号也拉低，语义错误
多个 sub 连续出现时高度不一致怎么办
像 Fe2(SO4)3·9H2O 这类结构，“4” 和 “3” 看起来一高一低，这不是 bug：
- 这是浏览器按各自基线对齐的正常行为——每个
sub独立计算偏移，不是统一锚点 - 别用 CSS 强行统一
vertical-align值，会破坏字体度量适配，换字体后更难看 - 真需要视觉对齐（比如出版级排版），应切到 MathML 或 KaTeX；
sub的定位就是“语义准确优先，视觉大致合理”
真正麻烦的从来不是怎么写 2，而是你写的那一行 HTML，是否能在 CMS 编辑器里存住、在 Safari 里读得清、在打印 PDF 时不下移、在盲人用户耳机里被念成“H 下标 2 O”。sub 是唯一贯穿所有环节的确定性支点——绕开它，等于主动放弃语义链上的一环。
