2

次のようなドキュメントの場合： 

    <p class = "wrapper">
        <span class = "ref">
        <spanclass="text">英語</span>
    </ p>
次のルールが適用されます。 
    .wrapper {
      背景：緑;
      位置：相対;
      パディング-左：20px;
      font-family：Times;
    }
    。文章 {
      行の高さ：1;
      背景：青;
      font-size：80px;
    }
    .ref {
      位置：絶対;
      左：5px;
      幅：10px;
      高さ：80px;
      背景：黒;
    }

Chrome（バージョン22.0.1229.79）またはIE9では、「英語」を含むspan要素の背景の高さがfont-sizeよりも大きいようですが、Firefox（13.0.1）では高さがfont-sizeと同じです。（出力を参照してください）

誰かがこれを説明できますか？

コンテンツ領域の高さは、font-sizeで指定された値と同じになると思いました。

4

1 に答える 1

1

テキストをレンダリングするときに使用できるさまざまな参照線を示す図を次に示します。

WHATWG から

ご覧のとおり、多くの選択肢があります。Firefox は、レンダリング時に Chrome/IE とは異なるベースラインを使用しているようです。

于 2012-10-07T10:07:45.057 に答える