4

HTML 4.01 Transitional doctype 宣言を使用した次の例では、スパンは上部と下部の間に特別なギャップを取得しません。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="background:red"><span>dark green</span></div>
</body>
</html>

CSS

span {
    background: yellow;
    color: black;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: normal;    
}

しかし、HTML5 宣言を使用するように変更すると<!DOCTYPE html>、スパンに特別なギャップが生じます。

jsfiddleの全体の例を次に示します (Fiddle Options の DTD を変更して HTML5 を使用すると、そこで問題が発生します。

4

1 に答える 1

5

これは、div 要素で「行の高さ」がどのように計算されるかに関係しています。この問題を解決するには、div 要素の「line-height」をスパンと同じ「font-size」に設定します。このように：

div { line-height: 12px; }

Strict (および HTML5) の DOCTYPEは、 「行の高さ」を「最小の高さ」であるかのように強制しているようです。要素内にテキストがない場合でも、「行の高さ」は引き続き適用されます。

Transitional DOCTYPE は、ブラウザーで "Almost Standards" モードをトリガーします。これは、基本的にいくつかの癖のある標準モードです。

このページでは、「ほぼ標準」モードでの行の高さの計算の動作について説明します。

次のいずれかが true の場合にのみ、インライン要素が行の高さに寄与します。

要素の場合:

  • テキスト文字を含む
  • 境界線の幅がゼロでない
  • マージンがゼロでない
  • ゼロ以外のパディングがある
  • 背景画像あり
  • 垂直方向の位置合わせがベースライン以外の値に設定されている

改行は、行ボックスの唯一の内容でない限り、この定義ではテキスト文字とは見なされないことに注意してください。その場合、行ボックスの高さは、指定された行の高さに関係なく、行の最上部のインライン ボックスの上部と最下部のインライン ボックスの下部のままになります。

img要素がテーブル セルの唯一のコンテンツである場合、セル ライン ボックスの高さのライン ボックスの高さはゼロに調整されます。

于 2013-06-19T02:42:43.313 に答える