Question

一直没有使用DOCTYPE，而是根据HTML5标准（我理解它们）简单地以<html>开头。一切顺利。

开始使用Jade，DOCTYPE坚持<!DOCTYPE html>。使用<html> <body > <div style='height:50%; background-color:pink;'></div> <div style='height:50%; background-color:blue;'></div> </body> </html> - 页面不再正确呈现（？）。

作为一个简单而琐碎的例子（firefox和chrome上的行为相同）：

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

渲染得很好 - 有粉红色，半蓝色

DOCTYPE

呈现两个你看不到的瘦的DIV。

发生了什么事？
认为{@ 1}}已弃用HTML5
我该怎么办？

Answer 1

如果没有DOCTYPE，页面将以Quirks模式呈现。这意味着几十个怪异。您遇到的是Quirks Mode phenomena列表中的＃3：使用可用高度作为参考应用元素的百分比高度，即使封闭块具有height: auto（默认值）;根据规格，高度取决于内容的要求。
不，DOCTYPE根据HTML5草稿不被弃用 - 相反，它是必需的，但<!DOCTYPE html>以外的任何形式都被宣布为过时。
对于新页面，将它们设计为在“标准模式”下工作（当然使用<!DOCTYPE html>）。对于旧页面，它取决于。

在给定的情况下，要使浏览器的渲染区域按预期方式划分，请设置html和body元素的高度，从而使百分比高度适用于身体内的元素，即使在“标准模式”：

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

Answer 2

告诉你DOCTYPE被弃用的人要么是对你恶作剧，要么是无知的。

<小时/> W3C关于Syntax部分HTML5 differences from HTML4的文章第2.2节明确指出了这一点。

HTML5的HTML语法需要指定doctype 才能确保   浏览器以标准模式呈现页面。 doctype有   没有其他目的，因此是XML的可选项。有文件的   XML媒体类型始终以标准模式处理。 [DOCTYPE]

doctype声明为<!DOCTYPE html>，并且不区分大小写   HTML语法。早期版本的HTML中的Doctypes更长   因为HTML语言是基于SGML的，因此需要一个   参考DTD。使用HTML5不再是这种情况了   doctype只需要为编写的文档启用标准模式   使用HTML语法。浏览器已针对<!DOCTYPE html>执行此操作。

至于为什么在你的例子中设置<!DOCTYPE html>时的行为。

此行为是预期的。这是因为body是块级元素。因此，默认情况下，它在shrink-to-fit模型和宽度中具有高度，默认情况下为expand-to-fit模型。在style="height:100%;"标记中设置body可以让正文占据整个可用高度，并显示两个div。

Answer 3

我不确定为什么那些DIV会在你改变之前出现。

但您的DOCTYPE声明对于HTML5是正确的 - 请参阅http://www.w3.org/TR/html5-diff/#doctype。

而且，如果您将高度：100％添加到HTML和BODY，您将看到这些元素。它们占据容器高度的50％，即0，所以它们的高度也是0.见http://jsfiddle.net/sync/EUXTY/。

<doctype html =“”>与 - 渲染问题firefox和chrome </doctype>

3 个答案: