应优先使用 和 标签而非 css vertical-align，因其语义正确、兼容性好、可访问性强；仅对真正需下标/上标的字符（如 co2 中的“2”）使用标签，避免包裹括号或整段公式，并注意字体、行高及移动端缩放对渲染的影响。
什么时候该用 <sub></sub> 而不是 CSS 的 vertical-align
直接用 <sub></sub> 或 <sup></sup> 是语义正确且浏览器默认行为最稳的选择。比如写 H2O 或 xn，用标签能确保屏幕阅读器识别为下标/上标，打印时缩放比例也一致。CSS 的 vertical-align: sub 只是视觉模拟，语义丢失，且在某些邮件客户端或旧版 Outlook 中完全不生效。
常见错误是把整个分子式（如 “CO₂”）硬塞进一个 <sub></sub> 里，结果变成 CO₂——氧原子下标了，但碳和氧之间本不该有偏移。正确做法是只包真正需要下标的数字：CO<sub>2</sub>。
<sub></sub> 和 <sup></sup> 在数学公式里的边界问题
幂运算中容易忽略嵌套和多级结构。比如 abc 这种写法在 HTML 中不合法——<sup></sup> 不能直接嵌套 <sup></sup>（HTML5 允许，但多数编辑器/富文本组件会自动扁平化）。更稳妥的是用单层 + 空格或括号辅助理解：a<sup>b</sup><sup>c</sup> 显示为 abc，不如写成 a<sup>b</sup><sup><small>c</small></sup> 或直接用 MathML。
化学式中带括号的下标（如 Ca(OH)2）必须把括号保留在 <sub></sub> 外：Ca(OH)<sub>2</sub>，而不是 Ca<sub>(OH)2</sub>——后者会让括号也变小变低，语义错乱，渲染也难看。
字体与行高对 <sub></sub>/<sup></sup> 渲染的影响
不同字体对下标/上标的垂直偏移量和字号缩放比例不一致。例如 macOS 上的 San Francisco 和 Windows 上的 Segoe UI 对 <sub></sub> 的默认缩小比例分别是 0.78 和 0.72，导致跨平台显示高度微差。如果设计要求严格对齐（比如和 SVG 图标并排），建议统一加 CSS 重置：
sub, sup {
font-size: 0.75em;
line-height: 0;
}
sub { vertical-align: -0.25em; }
sup { vertical-align: 0.25em; }
但要注意：这样会覆盖语义，仅在纯展示场景用；若内容需被爬虫或辅助技术准确解析，优先保留原生标签，靠字体选型和容器行高微调。
移动端缩放与可访问性陷阱
iOS Safari 在双击放大时，有时会把 <sub></sub> 文字缩得过小，甚至难以辨认。这不是 bug，而是其默认的“最小字体尺寸”策略触发了。解决办法只有两个：
— 给包含 <sub></sub> 的容器设 text-size-adjust: 100%（注意兼容性，Android Chrome 需加 -webkit-text-size-adjust）；
— 或者换用更粗的字体族（如 font-family: system-ui, -apple-system, sans-serif），避免细字体在缩小后糊成一片。
另一个常被忽略的点：色弱用户可能分不清下标数字和正常文字。别用浅灰写 H2O，至少保证与正文字号对比度 ≥ 4.5:1。如果分子式是链接或按钮的一部分，下标区域也必须是可点击热区——不要只给数字加 <a></a>，而应把整个表达式包裹进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
