输入类型=在Firefox中提交文本垂直对齐

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

我希望将某些s和s的样式设置为相同(我有一个按钮背景图像,使用滑动门技术来应用悬停效果.)

这一切都很有效,除了在Firefox中,输入提交文本比它应该略低.IE和Safari/Chrome工作正常.

alt text http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png

有人有任何想法吗？

谢谢

    « Back
    


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

Shelly Skeen.. 134

我发现这篇文章是因为几个月前我已经解决了这个问题,当我今天再次遇到这个问题时,我不记得我做了什么.尼斯.在仔细阅读我的CSS后,我终于找到了"修复".我不能相信,因为我在网上找到了它,但希望它对你来说和我一样有用:

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

我希望这有帮助.

1> Shelly Skeen..：

---

我发现这篇文章是因为几个月前我已经解决了这个问题,当我今天再次遇到这个问题时,我不记得我做了什么.尼斯.在仔细阅读我的CSS后,我终于找到了"修复".我不能相信,因为我在网上找到了它,但希望它对你来说和我一样有用:

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

我希望这有帮助.

---

谢谢,适用于按钮(`button :: - moz-focus-inner`).

---

是的,这让我几乎疯了一会儿.我很高兴传递它!

2> spirytus..：

---

每次我需要设置表单按钮样式时,我都会遇到同样的问题.对不起,此刻相当忙,所以只是简单的描述我通常如何解决它.

在FF中,文本通常略低,与您附加的图像完全相同,因此我只需在按钮本身上应用"padding-bottom".它会将按钮数上的文本向上移动.

问题是它还在IE中移动文本,现在IE看起来有点偏.为了解决这个问题,我将"line-height"应用于与按钮高度完全相同的相同按钮.这使得IE完全忽略填充并将文本放在中间位置.以下是示例HTML代码:

和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 */
}

对不起,我没有直接将它应用到你的代码中,但我现在有点忙,希望你有这个想法,但它有所帮助.

PS.刚刚在IE8中检查过以上所有内容都会将文本移动几个像素.所以它意味着更多(无尽的？)用填充顶部/底部来嘲弄..我现在失去了耐心,我想我将把所有这些放在单独的样式表中,从现在开始直到我找到一些相当简单和通用的解决方案为了这一切

3> 小智..：

---

输入的格式不符合不同浏览器中的W3框​​模型约定,您可能希望包括:

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

    height:24px;
}

还包括firefox(Shelly指出):

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

否则你可以使用按钮

我从各种渠道收集了所有这些解决方案,值得赞扬