必须用和标签而非css实现上下标，因其承载语义：指数、化学式、脚注、单位等需被读屏器识别为“上标2”“下标2”，误用（如年份上标）会干扰辅助技术。

直接用 <sub></sub> 和 <sup></sup> 标签就行，不用写 CSS、不用 JS，浏览器原生支持，语义正确、读屏器能识别、复制粘贴也保真。

什么时候必须用 <sub></sub> 和 <sup></sup>，而不是 CSS

只在内容本身有明确数学、化学或语言学含义时才该用——不是“看起来像”，而是“它本来就是”。

• 化学式：H<sub>2</sub>O、SO<sub>4</sub><sup>2-</sup>（原子数、电荷数）
• 数学幂次：x<sup>2</sup>、a<sub>n</sub>（指数、下标索引）
• 脚注编号：参见文献<sup>3</sup>、单位 m<sup>3</sup>
• 商标符号：TM<sup>™</sup>（™ 是符号，不是年份）
• 误用典型：©<sup>2025</sup> —— 年份不是上标，读屏器会念成“版权 上标 二零二五”

<sub></sub> 和 <sup></sup> 渲染失效的常见原因

它们默认就生效，但容易被全局样式意外覆盖。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 重置 CSS（如 Normalize.css 或某些 UI 框架）可能把 vertical-align 强制设为 baseline，直接废掉上下标位置
• 父容器设了 line-height: 1 或 font-size: 0，导致子元素缩放失效
• 手动给 <sup></sup> 加 style="vertical-align: super" —— 多此一举，还可能和行高冲突
• 嵌套在 <pre class="brush:php;toolbar:false;"></pre> 或等宽字体环境里，默认偏移常错位，此时应改用 font-variant-position: super

需要微调显示效果时怎么安全覆盖默认样式

可以改，但别碰 vertical-align 值本身；优先用比例单位控制缩放和偏移。

• 统一字号：sup, sub { font-size: 0.75em; }（避免写死 px，适配深色模式/缩放）
• 微调上移量：sup { margin-bottom: -0.15em; }（比 vertical-align: 0.2em 更稳，不破坏基线）
• 移动端可读性差？加媒体查询：@media (max-width: 480px) { sup, sub { font-size: 0.85em; } }
• 和 SVG 图标并排时抬得太高？改用 display: inline-flex; align-items: baseline; 包裹再调整

真正难搞的是混合场景：比如 CO<sub>2</sub><sup>−</sup> 要紧凑排版又不能丢语义——这时别硬调 CSS，优先确认是否真需 HTML 原生方案；复杂公式早该切到 MathML 或 KaTeX。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！