Question

我有一个以前没有doctype声明的网页。

现在，我已将<!doctype html>添加到开头。不幸的是，现在渲染方式不同。

有一个div应该垂直填充页面;现在它只填充页面的上半部分（下半部分是空的）。

这是div的CSS：

#thediv {
    float: left;
    width: 48%;
    height: 95%;
    margin: 2px 2px;
}

我的问题：

如何让div再次垂直填充整个页面？（更重要）
添加<!doctype html>会导致浏览器尝试将其呈现为HTML5吗？
为什么更改doctype会导致这种差异？（不太重要）

Answer 1

您需要将<html>和<body>代码（以及包含#thediv的任何其他代码）的高度设置为100％：

html, body {
    height: 100%;
}

doctype导致页面以标准模式呈现，而不是以怪异模式呈现。我建议您在the blog of the same name和doctype page上阅读有关怪癖模式的内容。

问题的简短摘要是这样的：在互联网令人兴奋的日子里，今天仍然没有任何浏览器超过版本4，每个浏览器都通过不同来区分自己 - 而不是更多符合规范。当浏览器制造商同意所有人都遵守相同的规范时，他们也决定继续支持旧的构建网页的方式（怪癖模式），以便旧页面仍可在新浏览器中正确呈现。这种怪癖模式仍然存在于大多数浏览器中 - 当它们检测到看起来像是在那些令人兴奋的日子里构建的页面时，它们会激活它。每个浏览器的检测和解决方法都不同 - here's an example of IE 8's。

Answer 2

如果没有DOCTYPE，则会强制浏览器进入Quirks Mode：

换句话说，所有浏览器都需要两种模式：旧模式的怪癖模式   规则，严格的标准模式。 IE Mac是第一个浏览器   实现两种模式，IE Windows 6，Mozilla，Safari和Opera   其次适合。 IE 5 Windows，以及Netscape等旧版浏览器   4，永久锁定在怪癖模式。

选择使用哪种模式需要触发器，此触发器是   在'doctype switching'中找到。根据标准，任何（X）HTML   文档应该有一个doctype，告诉整个世界哪个   文档正在使用的（X）HTML的风格。

Quirks Mode基本上是一种反社会模式，浏览器会在您忘记告诉他们遵循特定的DOCTYPE时进入。在大多数情况下，IE是最糟糕的，当你忘记用IE定义DOCTYPE时，所有地狱都会崩溃：

jQuery的DOM交互变得非常缓慢，因为IE在Quirks模式下没有实现很多DOM功能。
事情永远都不对劲。
远离它。你会那么开心。

Answer 3

是的，<!doctype html>是html5的文档类型

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

doctype告诉浏览器如何呈现页面，每个doctype将导致不同的呈现。

试试这个doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Answer 4

始终，始终，始终预先使用<!DOCTYPE __> 。

然后，设计您的网页。

否则，你不能指望它能够发挥作用。

更改doctype会导致网页呈现不同的内容

4 个答案: