11

一直没有使用DOCTYPE，而是简单地从<html>HTML5 标准开始（据我了解）。一切顺利。

开始使用Jade，坚持DOCTYPE。使用<!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。

  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 版本的文档类型更长，因为 HTML 语言是基于 SGML 的，因此需要对 DTD 的引用。在 HTML5 中，情况不再如此，只需要 doctype 来为使用 HTML 语法编写的文档启用标准模式。浏览器已经为<!DOCTYPE html>.

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

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

于 2012-10-13T05:44:54.600 回答
16
  1. 如果没有DOCTYPE，页面将以 Quirks 模式呈现。这意味着几十个怪事。您遇到的一个是我的Quirks Mode 现象列表中的 #3 ：应用元素的百分比高度，使用可用高度作为参考，即使封闭块具有height: auto（默认值）；根据规格，高度由内容的要求决定。
  2. 不，DOCTYPE根据 HTML5 草案不推荐使用 - 相反，它是必需的，但任何形式<!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 回答