11

いいえを使用してきましたが、HTML5標準に従って（私が理解しているように）DOCTYPE単純に始めました。<html>すべてうまくいっています。

Jadeと主張する使い始めましたDOCTYPE。using <!DOCTYPE html>- ページが正しくレンダリングされなくなりました (?)。

簡単で些細な例として (動作は firefox と chrome で同じです):

<html>
    <body >
        <div style='height:50%; background-color:pink;'></div>
        <div style='height:50%; background-color:blue;'></div>
    </body>
</html>

うまくレンダリング - ページはピンク、半分は青

<!DOCTYPE html>
<html>
    <body >
        <div style='height:50%; background-color:pink;'></div>
        <div style='height:50%; background-color:blue;'></div>
    </body>
</html>

見えない 2 つの細い DIV をレンダリングします。

  1. どうしたの？
  2. DOCTYPEHTML5 では非推奨になっていると考えられていました
  3. 私は何をすべきですか？
4

3 に答える 3

16

非推奨だと言った人は誰でもDOCTYPE、あなたにいたずらをしているのか、無知なのかのどちらかです.

W3C の記事HTML5 の HTML4との違い セクションSyntax、サブセクション 2.2 では、これが明確に述べられています。

HTML5 の HTML 構文では、ブラウザがページを標準モードでレンダリングするように、Doctype を指定する必要があります。doctype には他の目的がないため、XML ではオプションです。XML メディア タイプのドキュメントは、常に標準モードで処理されます。[文書タイプ]

doctype 宣言は<!DOCTYPE html>、HTML 構文で大文字と小文字を区別しません。HTML 言語は SGML ベースであり、DTD への参照が必要だったため、以前のバージョンの HTML の Doctype はより長くなりました。HTML5 では、これはもはや当てはまりません。doctype は、HTML 構文を使用して記述されたドキュメントの標準モードを有効にするためにのみ必要です。ブラウザはすでにこれを行ってい<!DOCTYPE html>ます。

そして、あなたの例で設定したときの動作はなぜですか<!DOCTYPE html>。

この動作は予期されたものです。これは がbodyブロック レベルの要素であるためです。したがって、モデルにはデフォルトで高さがあり、shrink-to-fitモデルにはデフォルトで幅がありますexpand-to-fit。タグで設定style="height:100%;"すると、bodyボディが使用可能な高さ全体を占めることができ、2 つの div が表示されます。

于 2012-10-13T05:44:54.600 に答える
16
  1. がないDOCTYPE場合、ページは Quirks モードでレンダリングされます。これは、何十もの奇妙なことを意味します。あなたが遭遇したものは、Quirks Mode 現象の私のリストの #3です: 要素のパーセンテージの高さが適用され、使用可能な高さを参照として使用しheight: autoます。仕様により、高さはコンテンツの要件によって決まります。
  2. いいえ、DOCTYPEHTML5 ドラフトによると非推奨ではありません。逆に必須ですが、それ以外の形式<!DOCTYPE html>は廃止されたと宣言されています。
  3. 新しいページの場合は、「標準モード」で機能するように設計します (もちろん、 を使用します<!DOCTYPE html>)。古いページの場合は状況によります。

この場合、ブラウザーのレンダリング領域を意図した方法で分割するには、 要素htmlとbody要素の高さを設定します。これにより、「標準モード」でも本文内の要素にパーセンテージの高さが適用されます。

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
于 2012-10-13T06:05:53.303 に答える
2

変更前にこれらの DIV が表示された理由がわかりません。

ただし、DOCTYPE 宣言は HTML5 に対して正しいです。 http://www.w3.org/TR/html5-diff/#doctypeを参照してください。

そして、height: 100% を HTML と BODY に追加すると、それらの要素が表示されます。コンテナーの高さの 50% (0) を占めているため、高さも 0です。 http://jsfiddle.net/sync/EUXTY/を参照してください。

于 2012-10-13T05:46:54.347 に答える