sub和sup标签的vertical-align默认值在css中为baseline，但浏览器通过原生语义行为实现上下标偏移，而非依赖vertical-align:sub/super计算；显式设置会导致双重偏移错位。
sub 和 sup 的 vertical-align 默认值是什么
浏览器对 <sub></sub> 和 <sup></sup> 的默认 vertical-align 值不是 sub 或 super，而是由规范定义的“语义对齐行为”——它不依赖 CSS 属性计算，而是渲染引擎直接实现的基线偏移。这意味着你查不到 getComputedStyle(el).verticalAlign 返回 "sub"，它通常返回 "baseline"，但视觉上仍正确下移/上移。
这种设计是为了保障可访问性：屏幕阅读器靠标签语义识别上下标，而不是靠 CSS 样式。所以别试图用 vertical-align: sub 替代 <sub></sub> 标签——前者只是视觉模拟，后者才是语义真实。
为什么给 sub/sup 加 vertical-align 有时反而错位
显式设置 vertical-align: sub 或 super 在已有的 <sub></sub>/<sup></sup> 元素上，会导致双重偏移：一次来自标签原生行为，一次来自 CSS。结果是文字抬得太高或压得太低，尤其和图标、emoji 并排时明显失衡。
常见错误场景：
- 在
<sub>2</sub>外层再套一层span并设vertical-align: sub - CSS 重置中全局写了
sub, sup { vertical-align: sub; }（多余且有害） - 用
vertical-align: -0.5em这类 magic number 覆盖默认行为，破坏跨浏览器一致性
真正需要微调时，优先改 font-size 和 line-height，而非碰 vertical-align。
数学公式里 sub 嵌套或连用时的对齐问题
HTML 原生 <sub></sub> 不支持多级下标（比如 log₂x 中的 “2” 是下标，但若想写 log2nx 就会出问题），浏览器会把连续多个 <sub></sub> 当作并列内联元素处理，而非嵌套语义。
实际可用方案：
- 单层下标直接用
<sub>2</sub>，如 H2O、log2x - 需要多级（如 aij）时，必须用 MathML 或 CSS
transform: translateY()+font-size手动控制，<sub></sub>本身不提供嵌套能力 - LaTeX 风格的
a_{i_j}在纯 HTML 中无法用<sub></sub>安全表达，别硬套
PDF 导出或打印时 sup/sub 偏移丢失怎么办
wkhtmltopdf、WeasyPrint 等工具对 <sub></sub>/<sup></sup> 的垂直偏移支持不一，有些版本会忽略原生偏移，只保留缩小字号，导致 “H2O” 渲染成 “H₂O” 但 “2” 没下移。
临时缓解办法（仅限导出场景）：
- 加一层包裹
span，用position: relative; top: 0.2em;模拟下移（注意单位用em，避免固定像素缩放失真） - 对导出专用 CSS，显式重置：
sub { position: relative; top: 0.2em; font-size: 0.75em; } - 测试时务必用真实 PDF 工具打开检查，别只信浏览器预览
最稳的方式其实是换 MathML 或 SVG，但代价是复杂度上升——多数项目卡在“够用就行”和“彻底合规”之间，得自己权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
