CSS で要素のline-height
プロパティを明示的に設定しました。<input>
しかし、firebug で要素を確認すると、line-height
この要素の値は CSS で設定したものではありません。また、line-height の値は、私が CSS で設定したものとは何の関係もないようです。これにはどのような理由が考えられますか?
3 に答える
CSS 2.1 仕様の の定義にline-height
よると、ブロック コンテナー要素に対しては特定の意味を持ち、置換されていないインライン要素に対しては別の意味を持ちます。そこでは、置き換えられたインライン要素に関するステートメントは見つかりませんinput
。要素は、多少議論の余地がありますが、置き換えられた要素と見なすことができます。
とにかく、奇妙に思えるかもしれませんが、ブラウザは要素を無視line-height
しているようです。回避策として、プロパティを設定するか、垂直パディングをinput
設定することを検討してください。height
ただし、結果はブラウザ間で一貫していません。経験則として、一部の機能は CSS を使用して調整できる場合もありますが、テキスト入力ボックスのレンダリングはブラウザーの制御下にあると想定する必要があります。
それがポイントだったかどうかはわかりませんが、マージン、パディングを指定して境界線を取り除きました。
開発ツールを確認すると、正確に14pxです(上記を指定する前でした):
http://dl.dropbox.com/u/26827941/ScreenShot060.png (chrome 開発ツール) http://dl.dropbox.com/u/26827941/ScreenShot061.png (ff の firebug)
あなたの場合の理由は、入力フィールドに指定された id またはクラスがあることが原因である可能性があります。
<input id="someID"/>
そして、次のようなものがあります
input#someID {line-height: 20px;}
css のどこかにあり、設定してその値を変更しようとしている可能性があります
input {line-height: 14px;}
そうでない場合は、アイデアがありません:)
lineheight は firefox ではレンダリングされませんが、IE ではレンダリングされると思います。lineheight スタイルをインライン要素ではなくブロック要素としてレンダリングするという、ちょっとしたコツがあります。
例えば:
これは機能しません
span {font-size:12px; line-height:14px}
しかし、これは:
span {font-size:12px; line-height:14px; display:block;}