<DOCTYPE html> 与 <html> - 渲染问题 firefox 和 chrome答案

【问题标题】：<DOCTYPE html> versus <html> - rendering problems firefox and chrome<DOCTYPE html> 与 <html> - 渲染问题 firefox 和 chrome
【发布时间】：2012-10-03 22:21:47
【问题描述】：

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

开始使用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。

发生了什么事？
认为 HTML5 已弃用 DOCTYPE
我该怎么办？

【问题讨论】：

实际上，DOCTYPE 不仅是必需的，我认为它是唯一是必需的元素：<!DOCTYPE html> 是一个有效的 HTML5单独记录。
@ultranaut，不，所需的DOCTYPE 前导码根本不是元素，如果您使用验证器，您会看到标记中需要title 元素。（html、head 和 body 元素始终存在，但它们的开始和结束标记是可选的。）
@JukkaK.Korpela 很公平，先生，DOCTYPE 不是一个元素。据我了解，在某些情况下 title 元素不是必需的，例如在电子邮件的上下文中？
@ultranaut：是的，在某些情况下 (stackoverflow.com/a/11943126/1591669)

标签： html doctype

【解决方案1】：

谁告诉你 DOCTYPE 已被弃用，要么是在对你开玩笑，要么是完全无知。

W3C 在其文章HTML5 differences from HTML4 的Syntax 部分的第2.2 小节中明确说明了这一点。

HTML5 的 HTML 语法需要指定 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%;" 允许body 占据整个可用高度并显示您的两个div。

【讨论】：

身体没有高度。它从<html> 继承高度，后者从视口继承高度。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我不确定为什么这些 DIV 会在您更改之前出现。

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

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

【讨论】：

对，谢谢！有趣的是需要将 100% 添加到 html 和 body