7

So I got this input field that I expect to be 34px high (border 2px + padding 2 * 10px + text 12px), but it ends up higher than that:

  • 37px in Firefox 15
  • 37px in Chrome 22
  • 36px in IE9

Question: why is my input field not 34px high?

The HTML / CSS

<input type="text" class="input" placeholder="Why is this not 34px high?">​

<style>
    .input {
    border: 1px solid #000;
    font-family: Arial;
    font-size: 12px;
    padding: 10px;
    width: 200px;
}​
</style>

Fiddle

Update: Defining line-height (12px) and setting box-sizing (border-box) does not help - updated fiddle

4

5 に答える 5

2

これは、作成したテキストが含まれる高さを定義していないためです。これを 12 に設定すると、全体の高さが 34px になります。

ボックスモデルに注意してください。 http://www.w3.org/TR/CSS2/images/boxdim.png

于 2012-10-19T12:21:53.687 に答える
2

これはbox-sizing

"box model"inは次のCSSように機能します。

width + padding + border= 実際に表示/レンダリングされたボックスの幅 height + padding + border= 実際に表示/レンダリングされたボックスの高さ

少し変ですが、慣れます。IE 6 以前では、"quirks モード" の場合、ボックス モデルの扱いが異なっていました。

width= 実際に表示/レンダリングされたボックスの幅 height= 実際に表示/レンダリングされたボックスの高さ

慣れているbox-sizing:border-box

より詳しい情報

リンク 2

于 2012-10-19T12:25:32.210 に答える
1

を に設定しfont-sizeて12pxも、テキストの高さが 12 ピクセルになるわけではありません。

フォントのサイズは、もはやテキスト行の高さではありません。かつては組版に使用された金属活字のサイズでしたが、現在はフォント デザイナーが定義する架空の値です。通常はテキストの高さに近いですが、テキスト行間にどれだけのスペースが必要なのか ( のような文字をぶら下げるため) に、フォントによって異なりますg。

また、フォント サイズは実際にはポイント単位であるため、ピクセル単位で指定すると、ブラウザーはそれをポイントに変換し、実装によって異なる丸めが含まれます。

したがって、基本的に、フォント サイズを指定すると、すべてのブラウザで同じピクセル サイズになるとは期待できません。

于 2012-10-19T12:30:52.510 に答える
1

行の高さが設定されているフォントに基づいているようです

ここでは font-size * 1.2 を取り、line-height を丸めていると思います。

法線の高さの計算

要素のフォントに基づいて、使用される値を「妥当な」値に設定するようにユーザー エージェントに指示します。値は と同じ意味です。1.0 から 1.2 の間の「通常」の値を使用することをお勧めします。計算値は「正常」です。

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-heightを参照してください

于 2012-10-19T12:34:12.790 に答える
0

その理由は、ブラウザーが独自の方法でインライン要素の高さを計算するためです。UA は、たとえば、em ボックスまたはフォントの最大アセンダーとディセンダーを使用することができます。」(CSS 2.1、条項 10.6.1 )。

異なるフォント (たとえば、Calibri がある場合) を使用すると、同じブラウザーを使用しても高さが異なる場合があります。

于 2012-10-19T13:55:30.340 に答える