1

私はこの宣言を持っています

body {font: normal .625em/1.2em Arial, sans-serif;}

私は通常、段落タグなどは行の高さを継承し、特定のサイズに適応させることを期待しています。例えば

p {font-size: 2.0em}

ベース 16 ピクセルのブラウザー フォント サイズ * .625 = 10 ピクセル * 2.0em = 20 ピクセルを想定すると、行の高さは 24 ピクセルになるはずです。20 ピクセルでの 1.2em の行の高さは 24 です。

ちょうど 1em としてレンダリングされているように見える奇妙なこと

body 宣言を次のように変更すると、

body {font: normal .625em/1.2 Arial, sans-serif;}

em 単位を省略すると、正しくレンダリングされます。だから私の問題は解決したと思いますが、これまで見たことがなく、なぜこれが起こったのか非常に混乱しています。その理由を知っている人はいますか？申し訳ありませんが、私がローカルに構築しているサイトを指すことはできません。

4

2 に答える 2

2

Eric Meyer は、数年前に「単位のない行の高さ」について書いています: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

基本的に、ユニットを含める場合、行の高さは現在の要素のフォント サイズではなく、祖先要素のフォント サイズに基づいています。

于 2012-12-05T00:15:37.163 に答える
0

プロパティが継承される場合、継承される値は「<a href="http://www.w3.org/TR/CSS21/cascade.html#computed-value" rel="nofollow">計算値」です。1.2emこれは、 forの値を宣言するとbody、bodyフォント サイズが 1.2 倍され、その結果がbodyプロパティが設定されていない の子に継承される値になることを意味します。独自のフォント サイズに関係なく。

にはline-height、純粋な (単位のない) 数値の使用に関する特別な規則があります。[…] 計算された値は、指定された値と同じです。これは、値を として指定すると1.2、 を使用して得られるのと同じ行の高さbody(「使用された値」) が得られます1.2emが、継承された値 (「計算された値」) は純粋な数値 1.2 であることを意味します。これは、各要素の独自のフォント サイズが乗算されることを意味します。

士気は、line-height通常、純粋な数値を使用して設定する必要があります。さらに、一般に、すべての要素に対して設定し、すべての継承を回避するのが最善* { line-height: 1.3; }です。(ちなみに、一般的に Arial では 1.2 よりも 1.3 の方が優れています。StackOverflow は 1.3 に対応する値を使用し、Arial を主要なフォントとしており、行の高さはここではほとんど過大ではありません。ただし、これはもちろん行の長さなどの要因に依存します。)

于 2012-12-05T06:54:39.997 に答える