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-fitstyle="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>)。对于旧页面,这取决于。

在给定的情况下,为了使浏览器的渲染区域按预期方式划分,设置htmlbody元素的高度,从而使百分比高度适用于即使在“标准模式”下的主体内部元素:

<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 回答