标签用于语义化上标，如单位m²、脚注¹，但不可替代数学幂运算；复杂公式应使用katex或mathml，其仅提供视觉位移与语义标注，不参与数学排版计算。
用 <sup></sup> 标签实现上标，但别乱套在数学公式里
<sup></sup> 是 HTML 原生标签，语义明确、浏览器原生支持，写 <sup>2</sup> 就能显示为上标“²”。但它只是**视觉位移 + 语义标注**，不参与排版计算，也不带数学含义。适合简单场景：单位（m2）、脚注编号（¹）、化学式（H₂O 中的“2”不能用 <sup></sup>，得用 <sub></sub>）。
常见错误是直接拿它写幂运算，比如 2<sup>10</sup> —— 看起来像 2¹⁰，但实际是“2”和“10”两个独立字符，字体大小、基线、间距全靠浏览器默认样式撑，不同浏览器渲染差异明显，缩放时容易错位。
数学幂运算该用 MathML 还是 KaTeX？
真要展示 2^{10} 这类表达式，<sup></sup> 不够用。MathML 是 HTML 原生数学标记语言，语义最强，但兼容性差（Safari 支持尚可，Firefox 次之，Chrome 长期弱支持），且写法冗长：<math><msup><mn>2</mn><mn>10</mn></msup></math>。日常项目中更推荐 KaTeX —— 轻量、渲染快、CSS 可控、支持 LaTeX 语法。
实操建议：
- 只引入 KaTeX 的 CSS 和 JS（
katex.min.css+katex.min.js），不用完整 LaTeX 环境 - 用
\(2^{10}\)或\[e^{i\pi}+1=0\]包裹表达式，调用katex.render()渲染 - 避免在大量动态内容中逐个调用
render()，可批量处理或用auto-render插件 - 注意 KaTeX 默认禁用某些危险命令（如
\href），如需启用要显式配置trust: true
<sup></sup> 的样式能自定义吗？小心覆盖可访问性
可以，但得克制。默认 <sup></sup> 的 font-size 约为 75%，vertical-align 是 super。若强行改成 font-size: 12px; top: -0.5em;，可能破坏屏幕阅读器对上标语义的识别（它依赖原生标签和默认行为）。
安全做法：
- 仅微调
line-height或margin修复行高塌陷 - 用
font-variant-position: super;替代<sup></sup>标签（仅限 OpenType 字体支持的字符，如数字 1–9 和 +−=()，不通用） - 若必须换字体，确保新字体包含上标字形（查 font-feature-settings 或使用
@font-face的font-feature-settings: "sups";）
移动端缩放时 <sup></sup> 错位？根源在视口与像素对齐
不是标签问题，是 CSS 渲染层面对 subpixel 定位的处理差异。iOS Safari 缩放后，vertical-align: super 计算出的偏移值可能被四舍五入，导致上标“跳动”或“下沉”。
缓解方案：
- 给含
<sup></sup>的行设置固定line-height（如line-height: 1.5），减少重排波动 - 避免父容器用
rem或vw动态缩放字体，改用px或em相对单位 - 极端情况可加
transform: translateZ(0);强制硬件加速（但慎用，可能引发其他渲染异常）
真正复杂的数学表达式，别硬扛——用 KaTeX；简单上标又不想引库？<sup></sup> 够用，但得接受它只是“看起来像”，不是“算出来就是”。
