sub和sup标签默认对齐效果差，因其仅为语义标签，浏览器仅按字体度量做百分比缩放与偏移，未考虑基线、字重及字体设计差异，导致混排时出现悬浮或下沉；可靠方案是css重置vertical-align为baseline或具体值，并显式设置font-size。
sub 和 sup 标签默认对齐效果差，为什么？
因为 <sub></sub> 和 <sup></sup> 是纯语义标签，浏览器只按默认字体度量调整垂直偏移（通常基于 font-size 的百分比），不考虑基线、字重或字体本身的设计差异。同一行中混用 <sub></sub>、<sup></sup> 和普通文本时，视觉上常出现“悬浮”或“下沉过深”——尤其在等宽字体、数学公式或化学式（如 H2O、CO2）里特别明显。
如何让 sub/sup 与周围文字基线对齐？
靠 CSS 重置垂直对齐和字体尺寸最可靠。关键不是禁用标签，而是覆盖其默认行为：
-
vertical-align改为baseline或具体数值（如-0.25em），避免依赖浏览器默认的sub/sup偏移逻辑 - 显式设置
font-size（如0.75em），防止某些字体下缩放失真 - 给
<sub></sub>和<sup></sup>单独定义样式，避免继承干扰
示例：
sub, sup {
vertical-align: baseline;
font-size: 0.75em;
}
sub { bottom: -0.25em; }
sup { top: -0.25em; }
化学式/数学式中 sub/sup 位置仍不准怎么办？
当内容含多个连续下标（如 PO43−）或需要精确匹配 LaTeX 排版时，<sub></sub>/<sup></sup> 的简单组合会失效。此时应：
- 用
<span></span>+ 自定义 class 替代原生标签，获得完全控制权 - 对复杂表达式（如 ai,j2）优先考虑 MathML 或 KaTeX，而非硬调 CSS
- 若坚持用 HTML，把整个公式包进一个
<span class="formula"></span>，再用 flex 或 grid 对齐内部<sub></sub>/<sup></sup>
IE 或旧版 Safari 下 sub/sup 渲染异常怎么处理？
IE11 及更早版本对 vertical-align: baseline 在 <sub></sub>/<sup></sup> 上支持不稳定；iOS 12 及之前 Safari 对 bottom/top 偏移计算有偏差。稳妥做法是：
- 加前缀兼容：用
transform: translateY(-0.2em)替代top/bottom（更稳定） - 对 IE 添加条件样式：
sub { position: relative; top: 0.1em; } - 避免在
<sub></sub>内嵌套<sup></sup>（如 xa2），旧引擎解析易错乱
真正难的不是写对标签，而是判断什么时候该放弃 <sub></sub>/<sup></sup> —— 比如单位符号 m²、℃ 中的上标，直接用 Unicode 字符（²、℃）反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
