我注意到我的输入按钮在Firefox中看起来不正确,我无法弄清楚如何使值(文本)出现在正确的位置。
.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">
答案 0 :(得分:5)
Firefox添加了一些额外的填充。你可以像这样解决它:
.rb::-moz-focus-inner {
border: 0;
padding: 0;
}
答案 1 :(得分:3)
我也遇到过FireFox的问题。它会忽略input
类型“提交”,“重置”和“按钮”上的行高设置。
使用padding的解决方法对我来说不起作用,因为我需要它来进行twitter bootstrap。 Twitter引导程序使用填充来调整按钮大小。
所以我发现了这个解决方法:
//FireFox workaround, FF ignores line-height for input elements.
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
line-height: 19px;
height: 19px;
}
答案 2 :(得分:1)
我最近遇到了同样的问题,在网上找到了一个关于行高度的非常好的解释(不仅在Firefox中,也在Opera浏览器中)
http://www.cssnewbie.com/input-button-line-height-bug/
我最近在Firefox和Opera中遇到了一个错误,当我尝试在按钮内设置文本的行高(这会影响输入“提交”按钮以及HTML按钮标记)。错误?线高不能改变!
底线建议是使用填充。
此外,我发现 minitech 非常有帮助,所以我猜你的问题有两个问题
答案 3 :(得分:0)
这依赖于使用height + padding + line-height等于font-size的显式大小调整。适用于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;
}
相对字体大小的示例:http://jsfiddle.net/qzYVP/2/
答案 4 :(得分:0)
min-height属性也可以使用,如果你在flexbox元素中使用输入,那么可能会很有用,在这里你可以伸展你不能有声明的高度。