火狐与输入行高的错误？任何工作？ [英] Firefox bug with INPUT line-height? Any work around?

问题描述

我注意到我的输入按钮在Firefox中看起来不正确，我不知道如何让值（文本）出现在正确的位置。

  .rb {
 width：142px; 
 height：142px; 
 float：left; 
背景：＃2F2F2F; 
颜色：#FFF; 
 font-size：95％; 
 line-height：210px; 
 margin-top：15px; 
 border：0; 
概述：无; 
 padding：0; 
 text-align：center 
} 
 
 .rbSubmit {
 background：url（'http://www.41q.org/admin/img/sprite_icon。 png'）-568px -200px不重复; 
 color：＃808080 
} 
  

 < input id =rbSubmitclass =rb rbSubmittype =submitvalue =submit> 
  

解决方案

http://jsfiddle.net/qzYVP/1/

这要依靠明确的大小调整高度+填充+行高等于字体大小。适用于IE8 / 9，FF，Chrome。

  .rb {
 width：142px; 
 
 / *调整这些以获得所需的确切字体大小/位置* / 
 height：14px; 
 font-size：14px; 
 line-height：14px; 
 padding：90px 0 38px 0; 
 
 float：left; 
背景：＃2F2F2F; 
颜色：#FFF; 
 margin-top：15px; 
 border：0; 
概述：无; 
 
 $ / code> 

相对字体大小的示例： http://jsfiddle.net/qzYVP/2/

I noticed my input button does not look correct in Firefox and I can't figure out how to make the value (text) appear in the proper location.

.rb {
    width: 142px;
    height:142px;
    float:left;
    background:#2F2F2F;
    color:#FFF;
    font-size:95%;
    line-height:210px;
    margin-top:15px;
    border:0;
    outline:none;
    padding:0;
    text-align:center
}

.rbSubmit {
    background: url('http://www.41q.org/admin/img/sprite_icon.png') -568px -200px no-repeat;
    color:#808080
}

<input id="rbSubmit" class="rb rbSubmit" type="submit" value="submit">

解决方案

http://jsfiddle.net/qzYVP/1/

This relies on explicit sizing using height + padding + line-height equal to font-size. Works in IE8/9, FF, Chrome.

.rb {
    width: 142px;

    /* tweak these to get the exact font size/position desired */
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    padding: 90px 0 38px 0;

    float:left;
    background:#2F2F2F;
    color:#FFF;
    margin-top:15px;
    border:0;
    outline:none;
}

Example with relative font size: http://jsfiddle.net/qzYVP/2/

这篇关于火狐与输入行高的错误？任何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！