标签是唯一能正确表达下标语义的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 过滤没放行
<sub></sub>，保存后只剩纯文本 “2”，标签被清空
sub 必须成对闭合，且不能跨字符乱包
语法极简，但错一个符号就全乱：
-
<sub>2</sub>✅ 正确；<sub>2</sub>❌ 单标签会让后续所有文字都被当上下标 -
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>✅ 多位数必须整体包裹；C<sub>6</sub>H<sub>1</sub><sub>2</sub>O<sub>6</sub>❌ 语义断裂，“1” 和 “2” 分开下标，渲染错位 -
Ca<sub>3</sub>(PO<sub>4</sub>)<sub>2</sub>✅ 括号是普通文本，括号内容整体下标；Ca<sub>3</sub>(<sub>PO</sub>4)<sub>2</sub>❌ 把括号也拉低，语义错误
多个 sub 连续出现时高度不一致怎么办
像 Fe<sub>2</sub>(SO<sub>4</sub>)<sub>3</sub>·9H<sub>2</sub>O 这类结构，“4” 和 “3” 看起来一高一低，这不是 bug：
- 这是浏览器按各自基线对齐的正常行为——每个
sub独立计算偏移，不是统一锚点 - 别用 CSS 强行统一
vertical-align值，会破坏字体度量适配，换字体后更难看 - 真需要视觉对齐（比如出版级排版），应切到 MathML 或 KaTeX；
sub的定位就是“语义准确优先，视觉大致合理”
真正麻烦的从来不是怎么写 <sub>2</sub>，而是你写的那一行 HTML，是否能在 CMS 编辑器里存住、在 Safari 里读得清、在打印 PDF 时不下移、在盲人用户耳机里被念成“H 下标 2 O”。sub 是唯一贯穿所有环节的确定性支点——绕开它，等于主动放弃语义链上的一环。
