sup和sub是语义标签而非样式工具：sup表示上标（如m²、H₂O中的2），sub表示下标（如xᵢ、¹⁴C）；浏览器默认用小字号加垂直偏移渲染，但各引擎偏移量不一，不可用于精确定位。
sup 和 sub 标签在语义和渲染上的根本区别
它们不是样式工具，而是语义标签：<sup> 表示上标（如单位 m2、化学式 H2O 中的 2），<sub> 表示下标（如数学中的 xi、同位素 14C）。浏览器默认用较小字号 + 垂直偏移渲染，但偏移量不统一——Chrome 的 <sup> 垂直偏移约 0.25em，Firefox 约 0.3em，Safari 更浅。别指望靠它精确对齐公式。
什么时候该用 sup/sub，而不是 CSS transform
优先用 <sup> 和 <sub> 的场景：内容有明确语义（如化学式、数学变量、版权符号 ®）、需被屏幕阅读器正确朗读（JAWS 会读 “H sub 2 O”）、SEO 或结构化数据需要保留逻辑层级。用 transform: translateY() 只适合纯装饰性上/下移（比如自定义角标图标），否则会丢失语义、影响可访问性和打印效果。
常见错误：嵌套、行高与 line-height 冲突
这些标签本身不换行，但容易因父元素 line-height 过小导致上下标文字被裁切或重叠：
- 避免在
<span style="line-height: 1">里直接放<sub>—— 下标可能被截掉底部 -
<sup>嵌套<sup>（如 abc）虽合法，但可读性差，多数屏幕阅读器只处理一层 - 若需多级（如矩阵索引 Aij(k)），建议用
<span>+ CSS 控制，而非堆叠<sub>/<sup>
兼容性与现代替代方案
<sup> 和 <sub> 在所有浏览器中都支持，包括 IE6。但如果你要显示复杂数学表达式（比如积分上下限、分式指数），不要硬凑 <sup> —— MathML 或 KaTeX 才是正解。另外，CSS 的 font-variant-position: sub; 或 super; 能实现类似效果，但目前仅 Firefox 支持，且不触发语义识别。
立即学习“前端免费学习笔记（深入）”；
