sub和sup混排错乱因浏览器独立计算偏移、基线未对齐；应统一font-size为0.75em，用top/bottom微调位置，电荷组合用inline-flex对齐，禁用嵌套，优先语义化分开书写并确保unicode减号u+2212。
sub和sup混排时为什么位置错乱
因为浏览器对<sub></sub>和<sup></sup>的默认偏移是独立计算的，不考虑彼此影响。比如H<sub>2</sub><sup>+</sup>里，“2”下移、“+”上移，但两者的基线没对齐，视觉上容易一高一低；更麻烦的是CO<sub>2</sub><sup>2-</sup>这种电荷标记，负号常比数字下沉更深，导致“2−”看起来松散、不紧凑。
怎么让sub和sup在一行里视觉对齐
靠重置vertical-align和font-size最直接，但不能一刀切设baseline——那会彻底废掉上下标效果。稳妥做法是：
- 统一字号：
sup, sub { font-size: 0.75em; }（避免用px，否则缩放/深色模式失效） - 微调垂直位置：
sup { top: -0.2em; }、sub { bottom: -0.15em; }（用top/bottom比vertical-align更可控，不干扰行高） - 对齐电荷类组合（如
2−）：给<sup>2−</sup>加display: inline-flex; align-items: baseline;，把负号当子元素单独控制
化学式里CO₂²⁻这类多级标记怎么写才合法又好看
HTML 不允许<sub><sup>2-</sup></sub>这种嵌套，解析器会自动修正结构，结果不可控，读屏器也易误读。正确写法只有两种：
- 语义优先：分开写
CO<sub>2</sub><sup>2−</sup>，再用 CSS 控制间距（如sup { margin-left: -0.1em; }） - 复杂场景绕开 HTML 原生标签：用
<span class="chem-charge">2−</span>自定义样式，或直接上 KaTeX 渲染$\mathrm{CO_2^{2-}}$ - 注意 Unicode 减号：必须用 U+2212（−），不能用 ASCII 连字符（-），否则语义和渲染都出问题
为什么有时候写了sub/sup却“看不见效果”
几乎全是外部 CSS 干扰，不是标签本身失效：
- 全局重置（如 Normalize.css）悄悄把
sup, sub { vertical-align: baseline; }，直接覆盖浏览器原生的super/sub - 父容器设了
line-height: 1或font-size: 0，导致子元素缩放被压制 - 富文本编辑器或 CMS 的 XSS 过滤没放开
<sup></sup>/<sub></sub>，保存后标签被删，只剩裸文本 -
<pre class="brush:php;toolbar:false;"></pre>或等宽字体环境里，默认偏移常错位，此时应改用font-variant-position: super;替代
真正难的不是写对标签，而是确保它从 HTML 写入到最终渲染的每个环节都不被覆盖、不被过滤、不被误读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
