line-heightプロパティーが<input>のCSSで設定されていないのはなぜですか？

Question

CSSの<input>要素のline-heightプロパティを明示的に設定しました。しかし、私がファイヤーバグの要素をチェックするとき、この要素のline-heightの値は私がCSSで設定した値ではありません。そして、行の高さの値はCSSで設定した値とは関係がないようです。これにはどのような理由がありますか？

Answer 1

CSS 2.1仕様でdefinition of line-heightによると、それはブロックのために特定の意味を持っていますコンテナ要素と、置換えられていないインライン要素とは異なる意味を持ちます。置き換えられたインライン要素についての文が見つかりません。input要素は、置き換え要素と見なすことができます。

とにかく奇妙に見えるかもしれませんが、ブラウザはline-heightをinput要素で無視しているようです。この問題を回避するには、heightプロパティを設定するか、垂直パディングを設定することを検討してください。しかし、結果はブラウザ間で一貫していません。経験則として、ブラウザの制御下にテキスト入力ボックスをレンダリングする必要がありますが、場合によってはCSSを使用していくつかの機能を調整することもできます。

Answer 2

lineheightはFirefoxでレンダリングされませんが、私はIEになると思います。ラインヒートスタイルをインライン要素ではなくブロック要素としてレンダリングする小さなトリックがあります。例えば

：

これは

span {font-size:12px; line-height:14px} 

を動作しません。しかし、これはされます：

span {font-size:12px; line-height:14px; display:block;} 

Answer 3

ないことがポイントだったが、私はマージン、パディングを指定し、国境を処分した場合は、ここであなたが正確に14pxを得てください：http://jsfiddle.net/mymlyn/Uq5Tt/2/

あなたはそれがあるのdevのツールをチェック（および上記のspecyfying前にあった）場合正確14px：

http://dl.dropbox.com/u/26827941/ScreenShot060.png（クロムdevのツール） http://dl.dropbox.com/u/26827941/ScreenShot061.png（FFで放火魔）

あなたのケースではその理由、あなたの入力フィールドが指定されたidやクラスを持っていることかもしれません

<input id="someID"/> 

とどこか他のあなたのCSSの

input#someID {line-height: 20px;} 

のようなものがあり、andyouことができなかった場合のアイデアのうち、イム

input {line-height: 14px;} 

を設定することで、ケースを、その値を変更しようとしている可能性があります:)