web-dev-qa-db-ja.com

IE8での入力に関するCSSスタイルの問題

Internet Explorer 8で入力のテキストを正しく表示するのに問題があります。Firefox、Safari、およびChromeはすべて同じように表示されます。

Firefox、Safari、Chrome

Firefox, Safari and Chrome

Internet Explorer 8

Internet Explorer 8

    <form action="" method="get">
       <input id="q" name="q" type="text">
       <input id="s" name="s" type="submit" value="Sök">
    </form>

#q {
    background:url(../../image_layout/search_field.png) no-repeat;
    width:209px;
    height:32px;
    padding:0 5px 0 5px;
    text-align:left;
    margin:0;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#09305b;
    font-weight:bold;
    position:absolute;
    left: 0px;
    top: 19px;
}
#s {
    background:url(../../image_layout/serach_buttom.png) no-repeat;
    width:56px;
    height:34px;
    padding:0;
    margin:0;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    border:0;
    position:absolute;
    left: 225px;
    top: 17px;
}
htmlcssinputtextinput
19
jamietelin

line-height: 34pxまたはその周辺を指定してみてください。

23
Matthew Abbott

CSS3ルールがあります： box-sizing 。このルールはIE8でサポートされています。

IE（IE8を含む）には非標準のボックスモデルがあり、paddingとborderはwidthとheightに含まれていますが、他のブラウザは標準と幅にパディングとボーダーを含めないでください。詳細に説明されています ここ 。
box-sizingをcontent-boxに設定すると、幅に境界線とパディングを含めないようにブラウザに指示します。box-sizing: border-boxを設定すると、すべてのブラウザに境界線とパディングが含まれます。幅。これまたはこれ、表示はすべての最新のブラウザーで一貫しています（IE8がそれほど最新であるというわけではありませんが、このルールもサポートしています:)。

11
Shimon Rachlenko

行の高さを設定する必要がありましたおよびdisplay: inline。理由はわかりませんが、うまくいきました。

5
bergie3000

検索入力フィールド#qの行の高さのプロパティを設定しますか？

2
Munim

次のように、IE8以下を対象とする行の高さを設定してみてください。

line-height: 32px\9;

line-height値は、入力の高さと\9はIE8以下を対象とします。

2
Paul Eduard Stanciu

position:absolute;とline-height:37px;が機能するためには、入力の位置はdisplay:inline;である必要があります。

1
keen

使用するだけ

line-height: 34px!important;
height: 34px;
0
arkasha69

私はそれで多くの問題を抱えていました、そして最終的に私はそれを解決しました：

例あなたが設定した

  INPUT {
   line-height: 44px
}

そして...

  INPUT:focus {
    line-height: 45px
 }

これは... f ...ピクセルで違いが生じ（フォーカスは通常よりも+ 1px大きくなります）、IE8でカーソルが適切な位置に配置されます。

0
sinner

まだコメントできません。Matthewの答えは役に立ちましたが、他の場所を検索せずにIEのみのラッパーが必要な場合に備えて：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    line-height: 20px;
}
0
suzumakes