0

我注意到我的输入按钮在 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">
4

5 回答 5

5

Firefox 添加了一些额外的填充。你可以像这样修复它：

.rb::-moz-focus-inner {
    border: 0;
    padding: 0;
}
于 2012-04-23T02:18:29.660 回答
3

我也遇到了 FireFox 的错误。input它忽略类型“提交”、“重置”和“按钮”的行高设置。

填充的解决方法对我不起作用，因为我需要它来进行 twitter 引导。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;
}
于 2013-07-26T10:23:14.573 回答
1

我最近遇到了同样的问题，在网上找到了一个关于行高的很好的解释（不仅在 Firefox 中，也在 Opera 浏览器中）

http://www.cssnewbie.com/input-button-line-height-bug/

我最近在 Firefox 和 Opera 中尝试设置按钮内文本的行高时遇到了一个错误（这会影响输入“提交”按钮以及 HTML 按钮标签）。错误？不能改变行高！

底线建议是改用填充。

我还发现minitech的回答非常有帮助，所以我想你的问题有两个问题

于 2013-06-06T10:37:49.270 回答
0

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

这依赖于使用高度 + 填充 + 行高等于字体大小的显式大小。适用于 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/

于 2012-04-23T02:20:54.857 回答
0

min-height 属性也可以工作，如果你在 flexbox 元素中使用输入，这可能很有用，在哪里能够拉伸你不能有一个声明的高度。

于 2013-11-11T16:26:26.740 回答