入力プレースホルダーの行の高さの問題

Question

問題は何ですか？

上の画像に示すように、高さ36pxの入力ボックスがあります。 IE10では、プレースホルダーは垂直方向の中央にありません。

Answer 1

すべての入力に対して、

line-height:normal;

通常の行の高さが必要で、すべてのブラウザで正常に機能します。

Answer 2

私は通常、高さと行の高さをinput [type = text]に設定し、これらのプロパティを:: placeholderに継承します。

height: inherit;
line-height: inherit;

Answer 3

解決策：

同じ36pxのline-heightをinput [type = "text"]に適用しました。

副作用：

Line-height：36pxを指定する前は、すべてのブラウザーで正常に機能していました。 input [type = "text"]に36pxの行の高さを適用すると、Safariで次のようになります。

2番目の解決策：

IEハックで行の高さを適用します。これは次のとおりです。

input[type="text"] {
    line-height: 36px\9; // CSS Hack only for IE.
}

Answer 4

これに遅れて来る人のために-私はTwitter Bootstrap（3.1）と私が実行した他のいくつかのテストで機能する解決策を見つけました。

入力要素に追加するだけです。

height: inherit;
vertical-align: middle;

Answer 5

この問題を修正するには、waterwarkjsを使用できます。

http://jsfiddle.net/maxim75/yJuF3/

フィドルをチェックしてください。

<input type="text" id="Text1" />