【CSS】Ant Design 按钮点击时文字位移问题

在开发基于 Ant Design 的项目时，遇到一个细微但恼人的问题：点击按钮的瞬间，按钮内部的文字会发生短暂位移（例如上下跳动），影响用户体验。

1. 问题现象

html 复制代码

<button class="x-btn CreditApplication ...">
  <div class="ant-wave ..." style="height:29px;"></div>
  <span>Financiering aanvragen</span>
</button>

当用户点击按钮时，按钮内部会被动态插入一个带有 ant-wave 类的 <div> 元素，高度为 29px。这个元素的出现会导致按钮内的文字瞬间位移（上下跳动），然后随着动画结束又恢复原状。

这种现象常见于使用 Ant Design 组件库的项目中，因为按钮默认带有 Wave 波纹动画（即点击时出现水波纹效果）。该动画通过在按钮内部插入一个绝对定位的元素来实现，但在某些情况下，这个元素的插入会影响到按钮内部的布局，引起文字偏移。

2. 问题分析

2.1 Wave 动画原理

Ant Design 的 Wave 组件会在被包裹的元素（如 Button）上监听点击事件，然后动态创建一个 <div> 元素（通常带有 ant-wave 类），并设置样式实现波纹扩散效果。这个元素通常是绝对定位的，理论上不应影响正常文档流。但在实际渲染过程中，由于浏览器渲染机制的差异，或由于按钮本身的 CSS 属性（如 line-height、vertical-align 等）设置不当，新插入的元素可能导致按钮内部行框高度变化，从而引起文字位置改变。

2.2 为什么文字会位移

按钮内部通常包含文本节点或 <span>，属于行内内容。
当动态插入一个块级或行内块元素（即使后来变为绝对定位），浏览器可能会重新计算该行的行框高度。
如果按钮没有显式设置 line-height 和 vertical-align，默认的行框高度可能随内容变化，导致文字上下移动。

在你的案例中，插入的 <div> 高度为 29px，且可能是行内块或块级元素，导致按钮内部的行框被撑高，文字基线发生变化。

3. 解决方案

调整按钮 CSS，补偿位移（你提供的代码）

css 复制代码

:global(.CreditApplication) {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

上述 CSS 补偿方案是一个轻量级技巧，适用于对波纹动画有依赖但不想牺牲视觉稳定性的场景。

`display: inline-block：`

将按钮设为行内块元素，使其在外部表现为行内元素，内部拥有独立的布局上下文。
这是 vertical-align 生效的前提，因为该属性仅对行内元素和行内块元素有效。

`line-height: 1：`

固定行高为字体大小的1倍，消除默认 normal 带来的不确定性，稳定按钮内部行框的高度。
确保行高不受动态插入元素影响，为后续垂直对齐提供稳定的基准。

`vertical-align: middle：`

强制按钮内容在行框中垂直居中。当动态插入元素导致行框高度变化时，该属性会自动调整文字位置，使其始终处于行框中央，从而抵消视觉位移。