html - 入力フィールドがブラウザ間で同じように見えるようにするにはどうすればよいですか?

Question

2 つの入力フィールドがあるログインページがあります。Chrome、Firefox、IE10 では見栄えがよくなりますが、IE 7、8、9 では薄すぎます。フィールドの HTML とクラスを次に示します。

HTML:

<div class="login-input">
<input data-val="true" data-val-required="Username is required." id="Username" name="Username" type="text" value="">
</div>

CSS:

.login-input input
{
width: 250px;
height: 14px;
}

これは、Chrome、Firefox、IE10 での表示です (正しい表示) http://i.imgur.com/6swf7.png

これはIE 7、8、9でどのように見えるかです（間違った外観） http://i.imgur.com/ltzdG.png

ありがとう！

score 1 · Accepted Answer

box-sizingしようとすることはできますが、そのためのie7のサポートborder-boxはありません。

input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

score 1 · Accepted Answer

1

パディングの値を設定してみましたか?

于 2013-01-10T15:36:22.513 に答える

score 0 · Accepted Answer

高さに加えて行の高さを使用します。

.login-input input
{
  width: 250px;
  height: 14px;
  line-height: 14px;
}

3 に答える 3