一直没有使用DOCTYPE，而只是根据HTML5标准从<html>开始(正如我所理解的)。一切顺利。
开始使用坚持使用DOCTYPE的Jade。使用<!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>
渲染两个你看不到的瘦DIV。
- 发生了什么事
- 认为
DOCTYPE已被HTML5弃用 - 我该怎么办
告诉你DOCTYPE被弃用的人要么是在开你的玩笑，要么就是完全无知
W3C在其文章中HTML5与HTML4在
Syntax部分的第2.2小节中明确说明了这一点。
HTML5的HTML语法需要指定doctype以确保浏览器以标准模式呈现页面。doctype具有没有其他用途，因此对于XML是可选的。带有XML媒体类型始终以标准模式处理。[DOCTYPE]
doctype声明为
<!DOCTYPE html>，在中不区分大小写HTML语法。早期版本的HTML中的文档类型较长因为HTML语言是基于SGML的，因此需要引用DTD。HTML5不再是这样doctype仅用于为编写的文档启用标准模式使用HTML语法。浏览器已经为<!DOCTYPE html>执行了此操作。
至于，为什么在示例中设置<!DOCTYPE html>时会出现这种行为。
这种行为是意料之中的。这是因为body是块级元素。因此，默认情况下，它在shrink-to-fit模型中具有高度，在expand-to-fit模型中具有宽度。在body标签中设置style="height:100%;"可以让身体占据整个可用高度，并显示您的两个div。
- 如果没有
DOCTYPE，页面将以Quirks模式呈现。这意味着许多奇怪的事情。你遇到的是我的Quirks模式现象列表中的第3个：即使封闭块有height: auto(默认值)，也会使用可用高度作为参考，应用元素的百分比高度；根据规格，高度由内容的要求决定 - 不，根据HTML5草案，
DOCTYPE并没有被弃用——相反，它是必需的，但<!DOCTYPE html>以外的任何形式都被宣布为过时 - 对于新页面，请将其设计为在"标准模式"下工作(当然也可以使用
<!DOCTYPE html>)。对于旧页面，则视情况而定
在给定的情况下，为了以预期的方式划分浏览器的渲染区域，设置html和body元素的高度，从而使百分比高度应用于主体内部的元素，即使在"标准模式"下也是如此：
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
我不知道为什么在您更改之前会出现这些div。
但是您的DOCTYPE声明对于HTML5是正确的-请参阅http://www.w3.org/TR/html5-diff/#doctype。
而且，如果您将height:100%添加到HTML和BODY中，您将看到这些元素。它们占据了容器高度的50%，即0，因此它们的高度也是0。看见http://jsfiddle.net/sync/EUXTY/。