2

SPAN を別の SPAN にラップしています。

<span id="outer">
  <span id="inner">
    Some long text
  </span>
</span>

そしてCSS：

#outer {
    font-size: 20px;
    font-family: 'Times New Roman';
    line-height: 30px;
}

#inner {
    font-family: 'Times New Roman';
}

このバリアントは、Opera、Safari、Chrome、FF でまったく同じようにレンダリングされます。テキストは正確に 30px 行の高さでレンダリングされます。

外側の SPAN が別のフォント ファミリ (Arial など) に設定されている場合:

#outer {
    font-size: 20px;
    font-family: 'Arial';
    line-height: 30px;
}
  • Chrome と Safari は、テキストを 31 ピクセルの行の高さでレンダリングします。
  • FF - 30.5px の行の高さ
  • Opera - 30px (予想通り)

なぜこれが起こるのですか？

注: このマークアップとスタイルは、ユーザーが WYSIWYG エディターで作成します。

4

2 に答える 2

1

下の画像を見ると、両方のフォントのベースラインの高さが異なることがわかります。Times New Roman は Arial よりも約 2px 短いようです。

私はフォント レンダリング エンジンの専門家ではありませんが、#outer に適用される 1 ～ 2 ピクセルの追加ピクセルは、Arial が 2 ピクセル高くなっていることが原因であると推測されます。

#inner 内のフォントは Times New Roman ですが、Arial として設定されているため、レンダリングは依然として外側の div に影響を与えます。

これにより、行の高さのどこに追加のピクセルがあるかについての洞察が得られることを願っています。

行の高さの比較

于 2013-01-23T16:20:22.857 に答える
0

適用されるline-height値は、ブラウザーで開発者ツールを使用して確認できるように、宣言された値です。残りは、おそらく継承とは関係なく、おそらく作成者が制御できないレンダリングの違いです。

于 2013-01-23T17:16:47.697 に答える