和是语义标签，仅用于数学幂次、化学式、脚注编号等有明确含义的场景；失效主因是CSS重置vertical-align、line-height过小或XSS过滤删标签。
<sup> 和 <sub> 是 HTML 原生标签，直接写就能用，不需要 CSS 或 JS。但多数“没效果”的问题，其实不是标签不会渲染，而是被样式或上下文悄悄破坏了。
为什么<sup>和<sub>突然不显示偏移？
它们默认就生效，失效通常是因为外部 CSS 强行重置了关键属性：
-
vertical-align: baseline—— 这是最常见的罪魁，比如 Normalize.css、Ant Design 或某些 UI 框架会全局设这个值，直接废掉上/下标位置 -
line-height: 1或font-size: 0在父容器上 —— 导致子元素缩放比例失效，<sub>文字被压扁甚至看不见 - 富文本编辑器或 CMS 的 XSS 过滤未放行这两个标签 —— 保存后只剩裸数字，标签被删
化学式里数字怎么包才不算错？
语义必须精准，不能图省事合并或漏包：
- H2O：只对氢原子数
2用<sub>，氧无下标，不写H<sub>2</sub>O<sub>1</sub> - Ca(OH)2：括号外的
2表示 OH 基团数量，括号本身不能进<sub> - SO42−：原子数
4用<sub>，电荷2−用<sup>，且减号必须是 Unicode U+2212（−），不是 ASCII 连字符（-） - C6H12O6：每个元素的原子数单独包裹，
12是 H 的专属下标，不可省略
能嵌套吗？什么时候该换 MathML？
<sup> 和 <sub> 允许相邻（如 SO<sub>4</sub><sup>2−</sup>），但禁止嵌套自身：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<sup><sup>2</sup></sup>—— 浏览器不认多层，语义混乱 - ❌ 错误：
<sub><p>x</p></sub>——<p>是块级元素，不允许出现在内联标签里 - ✅ 正确：
x<sub>i</sub><sup>2</sup>→ 渲染为 xᵢ²（先下标再上标） - ⚠️ 复杂场景（如多层指数、积分上下限、对齐要求高）—— 别硬调 CSS，直接切到
MathML或KaTeX
真正容易被忽略的，是语义边界：©2025 看起来像版权年份上标，但读屏器会念成“版权 上标 二零二五”，这是对辅助技术的干扰；<sup> 不是“小一号字”的快捷键，它只属于数学指数、电荷、氧化态、同位素质量数这些有明确含义的场景。
