doctype对css的影响答案

【问题标题】：Effect of doctype on cssdoctype对css的影响
【发布时间】：2011-12-24 06:16:45
【问题描述】：

当我这样做时

<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

div 填充窗口

但如果我在开头添加一个 doctype 标签

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

div 填充宽度，但不填充高度。

知道发生了什么吗？我知道我应该放置 doctype 标签，我只是想知道它在这种情况下会导致不同的行为。

【问题讨论】：

标签： html css

【解决方案1】：

缺少 doctype 声明会触发“怪癖模式”，这意味着浏览器会做不同的事情来处理文档，假设它是可能依赖于旧浏览器中存在的功能的遗留代码。粗略地说，“怪癖模式”意味着浏览器尝试表现得或多或少像 Internet Explorer 4。但它们以不同的方式进行；我编写了一个不完整的what happens in “quirks mode.”列表，“怪癖模式”应该只用于需要它的遗留页面；相反，在“怪癖模式”下工作的页面可能会在“标准模式”下崩溃，而您只需添加 doctype 声明即可。

在你的情况下，跳过这里的理论部分，你需要添加一些规则以使 div 元素以“标准模式”填充画布：

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

和

<div style="width:100%;height:100%;background:blue; position: absolute;"></div>

【讨论】：

【解决方案2】：

请阅读本文，您会了解有关 doctype 的想法， doctype是网页设计中非常重要的一部分

http://www.w3schools.com/tags/tag_doctype.asp

http://htmlhelp.com/tools/validator/doctype.html

【讨论】：

那篇 W3Schools 文章中有许多错误（令人惊讶的是，它是 W3Schools），WDG 文章已过时（并且未涵盖问题使用的 HTML 5）……也不回答被问到的问题。

【解决方案3】：

当您将 Doctype 添加到您的 html 页面时，您正在指示您的浏览器遵循 doctype 指定的标准。如果不指定，浏览器将不知道它是什么类型的文档。

您应该始终在页面中指定<!DOCTYPE>。

一些链接可帮助您了解 doctype 是什么以及为什么它很重要。 http://en.wikipedia.org/wiki/Document_Type_Declaration
http://www.w3schools.com/tags/tag_doctype.asp

【讨论】：

这不是 Doctypes 所做的。浏览器知道它是什么类型的文档，因为他们在尝试确定它时关心的是 Content-Type 标头，而不是 Doctype。 W3Schools 的那篇文章有很多错误。
好的，我对此进行了更多研究，发现 doctype 实际上定义了您的 (X)HTML 页面正在使用的版本。如果浏览器知道正在使用哪个版本，它就可以使用该特定版本来解析文档，而无需一直猜测如何解析文档的元素。 doctype 将有助于使用标准渲染模式，而不是浏览器特定的怪癖模式。同样，如果没有 doctype，则无法验证内容和 CSS。
如果内容类型为 application/xhtml+xml，浏览器仅使用 XHTML 解析器，如果它为 text/html，则它使用 HTML 解析器。 Doctype 仅用于 Quirks/Standards 模式。
您当然不需要 Doctype 来验证 CSS。 CSS 甚至不是标记。（甚至可以说，如果您针对模式进行验证，则不需要验证 (X)HTML）。

【解决方案4】：

确实如此。问题是body的高度不够大，所以div的高度会和body的高度一样大。

【讨论】：