5

ここの例: http://jsfiddle.net/D7v2Y/

firefox/webkit では、これはうまく機能します。テキストは中央に配置されます。IE10 または IE9 にはありません

input {
    display: block;
    box-sizing: border-box;
    line-height: 50px;
    height: 50px;
    padding: 10px;
}

ここで何が起こっているのか、テキスト入力をIEで垂直方向に中央揃えにして「正しく」表示するにはどうすればよいですか?

ありがとうございました！

4

3 に答える 3

14

と を調整する必要がpaddingありline-heightます。とbox-sizing: border-box、彼らは本質的に同じ不動産のために戦っています。

つまり、「50px の行の高さを 50px の合計垂直スペースに合わせますが、20px でパディングします」と言っているのです。

簡単な解決策は、 * 2 + = 50pxにline-heightなるように縮小することです。または、もっと必要な場合は、パディングを減らします。同じパディングを維持する場合は、高さを 70px に増やします。paddingline-heightline-heightline-height

例: http://jsfiddle.net/D7v2Y/11/

input {
    display: block;
    box-sizing: border-box;
    line-height: 30px;
    height: 50px;
    padding: 10px;
}
于 2013-05-25T02:26:44.270 に答える
2

font-size を追加しましたが、それでうまくいくようです:

input {
    display: block;
    box-sizing: border-box;
    line-height: 1.0;
    font-size: 20px;
    height: 50px;
    padding: 10px;
}

少し奇妙です...しかし、それはそれを行う1つの方法のようです.

フィドル: http://jsfiddle.net/audetwebdesign/Y2rd4/

ボックスのサイズ

Firefox と比較して、box-sizing プロパティが IE10/9 で異なる高さを計算することに気付きました。そのプロパティを省略すると、入力フィールドはより似たようにレンダリングされます。

于 2013-05-25T02:27:21.533 に答える
-2

パディングはIE8でそれを壊しています、神だけがその理由を知っています....

パディングを取り除くだけ

于 2013-05-25T02:20:26.410 に答える