你给上标下标调了多少年偏移量？今天 CSS 一行属性把它彻底接管了

baseline-shift 是 CSS Inline Layout Level 3 新增的属性，用来控制 SVG 文本元素相对父级基线的垂直偏移位置。以前你只能用 vertical-align 或者硬编码数值，今天这件事从浏览器底层接上了。

先看它解决什么问题：

“`css
/ SVG 里的上标，用 baseline-shift 控制位置 /
.text-above {
baseline-shift: super;
}

.text-below {
baseline-shift: sub;
}

/ 精确数值 /
.annotated {
baseline-shift: 0.5em;
/ 或者百分比，相对于 line-height /
baseline-shift: 20%;
}
“`

这个属性其实很早就存在于 SVG 规范，但一直以来是作为 presentation attribute 使用，不算真正的 CSS 属性。CSS Inline Layout Level 3 把它正式纳入 CSS 属性体系，和 vertical-align 配合使用。

和 vertical-align 的区别

vertical-align 作用于整个元素，baseline-shift 则专门针对 inline-level 盒和 SVG 文本内容元素：

“`html
<svg>
<!– 用 CSS 控制上标位置 –>
<text>
水的化学式是 H<tspan class=”superscript”>2</tspan>O
</text>
</svg>
“`

“`css
.superscript {
baseline-shift: super;
}
“`

关键限制：baseline-shift 只作用于 inline-level 盒和 SVG `<text>` 元素嵌套内的元素，不能用于普通 HTML 块级元素。

兼容性：2026 年进入 Baseline

“`
Chrome: 153+ (CSS property)
Firefox: 149+ (CSS property)
Safari: 27+ (CSS property)
“`

Safari 27 从 2026 年开始支持 CSS 写法。现在进入 Baseline 2026 Newly available 阶段。

实际用法

“`html
<style>
.footnote {
font-size: 0.75em;
baseline-shift: -0.5em;
}

.trademark {
font-size: 0.65em;
baseline-shift: super;
}
</style>

<p>
E = mc<span class=”footnote”>2</span>（爱因斯坦质能方程）
</p>

<p>
Web<span class=”trademark”>™</span> 标准
</p>
“`

以前实现这种精细的上下标控制，要么用 `<sup>/<sub>` 标签配合 line-height 微调，要么用 position: relative 硬算偏移量。现在一行 baseline-shift 搞定，位置调整也更好维护。

下一步

如果你在做排版系统，SVG 文本里还有大量用 presentation attribute 或硬编码 dy 偏移量的场景，可以把 baseline-shift 迁移过去，统一用 CSS 控制。