css - input type=在 Firefox 中提交文本垂直对齐

Question

我正在尝试设置我的表单按钮的样式，但我在 Firefox 中遇到了一个问题，我无法深入...

我想要确定的样式 <a /> s 和 <input type="submit" />看起来一样(我有一个按钮背景图像，使用滑动门技术来应用悬停效果。)

这一切都很好，除了在 Firefox 中，输入的提交文本比它应该的稍微低一些。 IE 和 Safari/Chrome 工作正常。

_{(来源:muonlab.com)}

有人有什么想法吗？

谢谢

<div class="buttons">
    <a href="#" class="button btn-small-grey">&laquo Back</a>
    <input type="submit" class="button btn-large-green" value="Save changes" />
</div>

.button
{
    cursor: pointer;
    border: 0;
    background-color: #fff;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    outline: 0;
    font-family: Arial, Verdana, Sans-Serif;
}

a.button
{
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    padding: 5px 0 0 0;
    height: 22px;
    margin-right: 1em;
}

.btn-small-grey
{
    height: 27px;
    width: 96px;
    background-position: 0 -81px;
    background-image: url(/assets/images/buttons/buttons-small.gif);
}

.btn-large-green
{
    height: 27px;
    width: 175px;
    background-position: 0px -54px;
    background-image: url(/assets/images/buttons/buttons-large.gif);
}

Answer 1

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

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

希望对您有所帮助。