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

私は最近非常に同じ問題に遭遇し、正確な行の高さに関する非常に良い説明をWeb上で見つけました（FirefoxだけでなくOperaブラウザでも）

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

最近、FirefoxとOperaで、ボタン内のテキストの行の高さを設定しようとしたときにバグが発生しました（これは、入力の「送信」ボタンとHTMLボタンタグに影響します）。不具合？線の高さは変更できません！

結論としては、代わりにパディングを使用することをお勧めします。

また、 minitechの回答が非常に役立つことがわかったので、あなたの質問には2つの問題があると思います

于 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プロパティも機能します。これは、フレックスボックス要素内で入力を使用している場合に役立つ可能性があります。ストレッチできるようにするには、高さを宣言することはできません。

于 2013-11-11T16:26:26.740 に答える