DTDがHTML4 Transitionalのページをとり、doctypeを<!DOCTYPE html>に変更し、その下のh1とdivの間に余分なスペースが表示されました。私はマークアップやCSSに他の変更を加えなかった。例えば、http://jsfiddle.net/ngordon/vSqkg/3/。HTML5とHTML4 - h1タグの余分なスペースがレンダリングされます - 削除するには？
DoctypeをHTML5 TransitionalからHTML5 Transitionalに変更すると、マークアップとCSSがまったく同じでも余分なスペースが表示され消えてしまいます。
どのようにしてその領域を取り除くことができますか？
HTML：ここ
は、回避策の一例です。 HTML5のdoctypeはStandardsモードを引き起こします。
このMicrosoftの記事では、この違いについて説明しています。http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29
インライン要素は、以下の のいずれかに該当する場合に限り、高さをラインに貢献：
それはほぼ標準モードにすることを言います。
要素場合：
は、テキスト文字に
が含まれていますが、非ゼロの境界線の幅
がゼロマージン
がゼロパディングに
- を持って持って持っています
は、垂直整列、それが唯一の内容でない限り、改行がこの 定義するためのテキスト文字とはみなされないことを、ベースライン
注以外の値に設定されている背景画像を持っていますラインボックス。その場合、 指定された の行の高さにかかわらず、行ボックスの高さは一番上のインラインボックスの上に残り、一番下のインラインボックスの下には の下に残ります。
img要素がテーブルセルの唯一の内容である場合、セルボックスの高さの行ボックス の高さはゼロに調整されます。
はほとんど批判的にあなたのケースでは、画像を含む行の高さの計算は、の行の高さの値に行の高さを増やす必要がありstrut、架空のインライン要素を含んでいないことを意味しh1要素。
このjsfiddleはストラットの代役を実際のテキストコンテンツとして と実際のspan要素を示しており、あなたはレイアウトがHTML 4.01移行のdoctypeとHTML5のDOCTYPEの両方で同じであることがわかります。
このjsfiddleはこのように、同じ考え、支柱はCSSを使用して製造されただけで、この時間を示しています。彼がやっていることの行の高さを削減され、khurramの答えの場合
h1:before {
content: '\A0';
}
h1であり、標準モードでは、ストラットの高さは画像の高さよりも低くなる。つまり、ライン全体の高さは、ストラットの高さではなく、画像の高さによって決まります。画像の高さは、標準とほとんどの標準モードで同じですので、モード間のレンダリングに違いはありません。
h1の線の高さを画像の高さ（25px）に一致させることはできませんが、12pxに設定するのはなぜですか？その理由は、支柱が上と下だけでなくまた、ラインのベースライン。ベースラインはテキストのディセンダを可能にするために、ボトムの少し上です。通常は3px程度の通常サイズのテキストです。デフォルトで画像はベースライン上にあり、ベースラインとボトムの間のギャップが画像の高さに加算され、ラインの高さが設定されます。
jsfiddleに表示されているimg { vertical-align: top }を使用して、画像をベースラインから外すことで解決できます。ここでh1の線高で調整すると、25pxより大きい値は線の間隔を増加させますが、25px以下の値はその間隔を変更しないことがわかります。
他のCSS効果の適用を開始する前にCSSリセットhttp://meyerweb.com/eric/tools/css/reset/をCSSに適用しましたか？
+1あなたのために。 –
CSSをリセットしても「問題」が発生します。 – KnF
あなたのバグはデフォルトの行の高さを扱います。
HTML4遷移は、H1 wrt行の高さの内容を無視して、25ピクセルの高さの要素を生成します。 HTML5はH1タグの行の高さを基準にしています（これは29ピクセルに相当します）。
しかし25pxという行の高さを明示的に指定することはできません。 （12pxに変更すると機能しますが、それはもっとハックのようです）。どうして？ – ForOhFor
これは、HTML5ボイラープレートにCSSがリセットされている理由です。
divをmargin: 0; padding: 0;に設定することもできますが、すべての要素をヒットするまですべての要素に対して行う必要があります。このスレッドのMeyerによるCSSリセットに関する答えは正しいです。 4.01移行DOCTYPEは、ブラウザでほぼ標準モードの原因となるhttp://jsfiddle.net/mikelegacy/vSqkg/5/
偉大な答えは、よく研究され、問題の根本に対処します。 – ForOhFor
私は画像のCSSを "display：block;"に設定することでこれを解決しましたが、別の状況では実行可能ではないかもしれません。 – KnF