9

DTDがHTML4Transitionalであるページを取得し、Doctypeをに変更する<!DOCTYPE html> と、その下のh1とdivの間に余分なスペースが表示されました。マークアップやCSSに他の変更を加えませんでした。

JSFiddleの例：http ：//jsfiddle.net/ngordon/vSqkg/3/ 。

DoctypeをHTML5からHTML4Transitionalに変更すると、マークアップとCSSがまったく同じであっても、余分なスペースが表示されたり消えたりすることがわかります。

そのスペースを取り除く方法はありますか？

4

5 に答える 5

12

HTML 4.01 Transitional doctype により、ブラウザーでほぼ標準モードが発生します。HTML5 doctype により、標準モードが発生します。

この Microsoft の記事では、違いについて説明しています: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29。

ほとんどの標準モードの場合は次のようになります。

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

要素の場合:

  • テキスト文字を含む

  • 境界線の幅がゼロでない

  • マージンがゼロでない

  • ゼロ以外のパディングがある

  • 背景画像あり

  • 垂直方向の位置合わせがベースライン以外の値に設定されている

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

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

あなたの場合、最も重要なのは、画像を含む行の高さの計算に、strut行の高さを要素の line-height 値まで増やす架空のインライン要素が含まれていないことを意味しh1ます。

このjsfiddleは、実際のテキスト コンテンツがストラットの代わりになっている実際のspan要素を示し&nbsp;ており、レイアウトが HTML 4.01 Transitional Doctype と HTML5 Doctype の両方で同じであることがわかります。

このjsfiddleは同じアイデアを示していますが、今回は支柱が次のように CSS を使用して作成されています。

h1:before {
   content: '\A0';
}

khurram の回答の場合、彼が行っているのは、行の高さを減らすことです。h1したがって、標準モードでは、ストラットの高さが画像の高さよりも低くなります。これは、線全体の高さが、ストラットの高さではなく、画像の高さによって決定されることを意味します。画像の高さは、標準モードとほぼ標準モードの両方で同じであるため、モード間のレンダリングに違いは見られません。

画像の高さ (25px) に一致するように行の高さをh1設定しても機能しないが、12px に設定すると機能する理由については、ストラットが上部と下部だけでなく、のベースラインも確立するためです。ライン。ベースラインは、通常約 3px の通常サイズのテキストに対して、テキストディセンダーを可能にするために、下部より少し上にあります。デフォルトでは、画像はベースライン上にあるため、ベースラインと下部の間のギャップが画像の高さに追加され、線の高さが確立されます。

img { vertical-align: top }これは、このjsfiddleに示されているを使用して、画像をベースラインから移動することで解決できます。ここで h1 line-height をいじってみると、25px を超える値では行間の間隔が増加することがわかりますが、25px 以下の値ではその間隔は変更されません。

于 2012-06-27T00:28:29.543 に答える
3

あなたのバグはデフォルトの行の高さを扱っています。

HTML4 トランジショナルは、行の高さに関する H1 の内容を無視し、高さ 25 ピクセルの要素を生成します。HTML5 は、29px に相当する H1 タグの行の高さを尊重しています。

于 2012-06-26T11:59:22.477 に答える
3

他の CSS 効果の適用を開始する前に、CSS リセットhttp://meyerweb.com/eric/tools/css/reset/を CSS に適用しましたか?

于 2012-06-26T11:56:32.693 に答える
2

line-height:12px;またはあなたが望むものを与えるだけです。
見てみましょう: JSFIDDLE . コードの変更。

于 2012-06-26T11:58:51.260 に答える
0

これが、HTML5 ボイラープレートに CSS リセットがある理由です。

div を a に設定することもできmargin: 0; padding: 0;ますが、すべての要素をヒットするまで、すべての要素に対して行う必要があります。このスレッドでの Meyer による CSS のリセットに関する回答は正しいです。

回避策の例を次に示します: http://jsfiddle.net/mikelegacy/vSqkg/5/

于 2012-06-26T21:27:39.513 に答える