我有一个联系表格，当您提交并且一切正常时，在您等待电子邮件发送时，会出现一个正在加载的 .gif 文件来代替按钮文本。但是，当我的 Javascript 添加图像时，会有一些额外的填充：
从：
到：
如果仔细观察，按钮和文本框之间有额外的空间。虽然在这里看起来并不多，但当您看到它实时变化时，它会非常明显。按钮实际上并没有改变高度，并且 .gif 是通过使用设置的background:#222 url('/somewhere/load.gif') no-repeat center center;
为什么会发生这种情况，我该如何解决？
就像约翰说的那样，这里没有很多信息可供使用。
但是，如果您添加background-size: contain;到包含您的 gif 的 id/class，这可能会起作用。
发生的事情并没有错，即使您可能想要不同的视觉效果。
我拍摄了您的两个按钮图像并将它们叠加如下：
我制作了一张 50% 透明的图像以对齐边缘。
在这两种情况下，按钮的高度相同。
发生的情况是，您的 GIF 图像的大小与按钮高度的 90% 相匹配。
相反，文本（“发送”）因为字体大小，没有。您可以通过调整字体大小和行高和填充来使文本更高，但您需要进行试验。
或者，使 GIF 的高度与字体大小相匹配。
参见演示：http: //jsfiddle.net/audetwebdesign/FsNe2/
考虑两个类似的按钮：
<input class="ex1" type="submit" value="Send Ex 1">
<input class="ex2" type="submit" value="Send Ex 2">
使用以下 CSS：
input.ex1 {
background: red url('http://placehold.it/60x60') no-repeat center center;
font-size: 60px;
}
input.ex2 {
background: red url('http://placehold.it/60x42') no-repeat center center;
font-size: 60px;
}
在 Windows 7 PC 上的 Firefox 中，其呈现如下图所示：
在示例 1 中，我创建了一个 60x60 像素的背景图像，字体大小为 60 像素。在这种情况下，图像看起来比字母高，因为字体自然会在字母上方和下方留出一些空间来说明上升和下降。
在示例 2 中，我将图像的高度降低到 42 像素，这更接近于大写 E 或 S 的高度。
您的标记没有任何问题，只需在创建设计元素时考虑这些印刷细节。