你也可以考虑用一个完全不同的元素来替换按钮。锚元素工作得很好。只要在它的“onClick”事件中添加一个“submit”函数，你就可以开始了。我认为这是一个更好（也更简单）的跨浏览器解决方案。

我发现这篇文章是因为我几个月前就解决了这个问题，而当我今天再次遇到这个问题时，我已经不记得我做了什么了。很好。在仔细研究了我的css之后，我终于找到了这个“修复”。我不能居功，因为我是在网上的某个地方找到它的，但希望它对你和对我一样有用：

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

我有同样的问题，每次我需要样式的形式按钮。对不起，相当忙碌的时刻，所以只有简短的描述我通常如何解决它。
在FF中，文本通常会低一些，就像你附加的图片一样，所以我简单地在按钮上应用“padding-bottom”，它会将按钮上的文本向上移动像素数。
问题是它也会移动IE中的文本，现在IE看起来有点不对劲。为了解决这个问题，我对同一个按钮应用了“行高”，其值与按钮的高度完全相同。这使得IE完全忽略填充，并将文本放置在中间。下面是HTML代码示例：

<input type="submit" value="SEARCH" class="search"/>

和CSS：

.search
{
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
    height: 29px;
    width: 104px;   
    border: 0; 

    /* centering text on button */
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
    padding-bottom: 2px; /* IE will ignore but works for FF */
}

对不起，我没有直接应用到您的代码，但我有点忙碌的时刻，希望你得到的想法，它的帮助虽然。
附言：刚在IE8中检查过，上面所有的都是将文本向上移动几个像素。所以这意味着更多的（无休止的？）嘲笑顶部/底部填充......我失去了耐心，我想从现在开始我会把所有这些放在单独的样式表中，直到我找到一些相当容易和通用的解决方案

在不同的浏览器中，输入的格式不符合W3框模型约定，您可能需要包括：

input /*Content follows box model*/
{ 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

    height:24px;
}

对于火狐（Shelly指出），还应包括：

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

否则，您可以使用按钮
我从各种来源收集了所有这些解决方案，他们值得称赞

我遇到了同样的问题，我已经解决了（仅适用于FF和Safari），方法是固定宽度，但不固定高度，并使用值：填充（顶部和底部），行高，如果需要设置垂直对齐到中间。然而，如果你设置所有的值（甚至字体大小）在像素更容易做。

**编辑：**我认为没有一个跨浏览器的解决方案，因为这个问题是由于浏览器的文本渲染。要完全解决这个问题，你可以用文本绘制一个背景图片，并将该图片应用到链接或按钮上。即使有了这个解决方案，你失去了可访问性。

或者，您可以使用条件CSS语句来改进每个浏览器的布局。