CSSの<input>
要素のline-height
プロパティを明示的に設定しました。しかし、私がファイヤーバグの要素をチェックするとき、この要素のline-height
の値は私がCSSで設定した値ではありません。そして、行の高さの値はCSSで設定した値とは関係がないようです。これにはどのような理由がありますか?line-heightプロパティーが<input>のCSSで設定されていないのはなぜですか?
答えて
CSS 2.1仕様でdefinition of line-height
によると、それはブロックのために特定の意味を持っていますコンテナ要素と、置換えられていないインライン要素とは異なる意味を持ちます。置き換えられたインライン要素についての文が見つかりません。input
要素は、置き換え要素と見なすことができます。
とにかく奇妙に見えるかもしれませんが、ブラウザはline-height
をinput
要素で無視しているようです。この問題を回避するには、height
プロパティを設定するか、垂直パディングを設定することを検討してください。しかし、結果はブラウザ間で一貫していません。経験則として、ブラウザの制御下にテキスト入力ボックスをレンダリングする必要がありますが、場合によってはCSSを使用していくつかの機能を調整することもできます。
thx manのポインタのおかげで、heightプロパティが設定され、動作します。 – chaonextdoor
lineheightはFirefoxでレンダリングされませんが、私はIEになると思います。ラインヒートスタイルをインライン要素ではなくブロック要素としてレンダリングする小さなトリックがあります。例えば
:
これは
span {font-size:12px; line-height:14px}
を動作しません。しかし、これはされます:
span {font-size:12px; line-height:14px; display:block;}
この回答には誤りがあり、実際には役に立たない。私たちがIE6/7について話している場合を除いて、IEやFirefoxでラインハイトがどのように扱われるかには特に違いはありませんが、それは関連性がないと考えることができます。 "'ブロック領域内の行の高さをラップする'は正しいフレーズではなく、[インラインとブロックレベルの要素の違い]を明確に理解しているとは思えません(http://www.impressivewebs.com/difference-ブロックインラインCSS /)。 lin-heightの動作についての実際の情報については、http://reference.sitepoint.com/css/line-height – sg3s
を参照してください。 –
ないことがポイントだったが、私はマージン、パディングを指定し、国境を処分した場合は、ここであなたが正確に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;}
を設定することで、ケースを、その値を変更しようとしている可能性があります:)
- 1. CSS:イメージがレンダリングされないのはなぜですか?
- 2. なぜJSF2(PrimeFaces3)Ajaxプロパティー・リスナーがトリガーしていないのですか?
- 3. 設定ファイルでlog4netが認識されないのはなぜですか?
- 4. はなぜ定義されていないのですか?
- 5. CSSが空白なしでフォーマットされているのはなぜですか?
- 6. DataContextが設定されていると、検証規則が実行されないのはなぜですか?
- 7. デバッグ時に相対パスが設定されていない、なぜですか?
- 8. CSSミステリー:CSSルールなしで幅が0pxに設定されていますか?
- 9. CSSで高さが設定されていないdivの高さを取得
- 10. ボタンの.CausesValidationがTrueに設定されているのはなぜですか?
- 11. close_on_execがデフォルトの設定でないのはなぜですか?
- 12. アニメーション化時にCSSのパラメータが設定されていない
- 13. ライブサーバでmysqli_fetch_all()が定義されていないのはなぜですか?
- 14. ControlItemでSubItemsが定義されていないのはなぜですか?
- 15. アプリケーションで「url_for」が定義されていないのはなぜですか?
- 16. limits.hでARG_MAXが定義されていないのはなぜですか?
- 17. ReactJSコードでthis.propsが定義されていないのはなぜですか?
- 18. React form onSubmit関数でスコープが設定されていないのはなぜですか?私のリアクトコンポーネントで
- 19. fetchedResultsControllerがnilに設定されているのはなぜですか?
- 20. HasLoadedOrAssignedValueプロパティがtrueに設定されているのはなぜですか?
- 21. 大きな画像パスがこれに設定されていないのはなぜですか?
- 22. リダイレクト時にCookieが設定されないのはなぜですか?
- 23. intはなぜですか?インスタンスプロパティがnullに設定されていますか?
- 24. このメッシュでバウンディングボックスが正しく設定されていないのはなぜですか?
- 25. DelphiのアドインDLLでDebugHookが1に設定されていないのはなぜですか?
- 26. Ruby on Railsモデルの属性がbefore_saveで設定されていないのはなぜですか?
- 27. プロトコルメソッドが指定されていないと警告が表示されないのはなぜですか?
- 28. PageMethodsオブジェクトが定義されていないのはなぜですか?
- 29. 関数名が定義されていないのはなぜですか?
- 30. debug.getinfo(1)に 'name'が指定されていないのはなぜですか?
笑。ここでdownvoteを求める。何の説明もありません。基本的には「CSSに問題があります。なぜですか?」 – alt
関連コードは表示できますか?実際に何が起こっているのかを知らずにデバッグするのは難しいです。 @ジャックソンGaryety downvoteは価値があるが、勘違いしないでください。 – sg3s
[スタックオーバーフローはマインドリーダーやクリスタルボールではありません](http://meta.stackexchange.com/a/128551/133242) –