input type =在Firefox中提交文本垂直对齐 [英] input type=submit text vertical alignment in Firefox

问题描述

我试图设置我的表单按钮，我遇到一个问题，在Firefox中，我无法到达底部...

I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...

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

I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)

这一切都很好，除了Firefox，输入提交文本略低于应该的。 IE和Safari / Chrome可以正常工作。

This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.

任何人都有任何想法？

>

Thanks

<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);
}

推荐答案

几个月前解决了这个问题，当我今天再次遇到这个问题时，我不记得我做了什么。尼斯。在我的css，我终于找到了修复。我不能取信用，因为我发现它在网络上的某个地方，但希望它会对你有用，因为它一直对我有用：

I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:

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

我希望这有帮助。

这篇关于input type =在Firefox中提交文本垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！