Css 样式未正确应用，如果使用 DOCTYPE答案

【问题标题】：Css styles not applied properly,if use DOCTYPECss 样式未正确应用，如果使用 DOCTYPE
【发布时间】：2012-05-09 22:56:12
【问题描述】：

1) Css 样式未正确应用于我的 HTML 页面，如果我在 html 上添加特定版本，如 HTML5、HTML4.1 严格等，如果我删除所有 DOCTYPE 语句，它工作正常。

我的 HTML 代码（无需 DOCTYPE 即可正常显示）：

<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

我的 HTML 代码（DOCTYPE 未应用红色背景）：

<!DOCTYPE html>
<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

另外，我尝试用严格的 XHTML 1.0 代替 HTML5，

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

和，

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

但对任何一个都不起作用。如何正确添加版本。

2) 也是现在最好的版本。 HTML5 或 html4.01 或带有 XHTML 的 HTML 4.01？

【问题讨论】：

标签： html css

【解决方案1】：

缺少 doctype 会触发 quirks mode，这只是为了向后兼容人们开始使用 doctypes 之前创建的“遗留代码”。它几乎不应该被使用。你应该总是声明一个文档类型。

选择哪一个？

在这个时代，这就是你所需要的：

<!DOCTYPE html>

如果您愿意，您可以继续在此文档类型中使用 XHTML 语法。就 CSS 而言，我知道不同的文档类型没有任何区别，只要你有一个。然而，Doctypes 会改变哪些属性和元素是有效的以及在哪些上下文中。使用 W3C Validator 测试您的 HTML。

不幸的是，这意味着您将重写大部分 CSS 以在标准模式下工作。我知道这听起来很麻烦，但你只需要硬着头皮重写它。

前进的重要提示：删除内联 CSS 并改用外部样式表，否则（除其他外）您会发现维护是一场彻头彻尾的噩梦。

感兴趣的：http://hsivonen.iki.fi/doctype/#choosing

选择文档类型

文本/html

简而言之：这里是选择文档类型的简单指南新文本/html 文档：

标准模式，前沿验证
<!DOCTYPE html>
这是正确的做法，除非您有特定的理由避免这样做。使用此文档类型，您可以验证新功能，例如 <video>、<canvas> 和 ARIA。请务必在顶级浏览器的最新版本。标准模式，遗留验证目标
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
此文档类型也会触发标准模式，但如果您想避免使用新功能或更多功能，您可以坚持使用旧版验证旧功能的精确验证。您想使用标准模式，但您在表格布局中使用切片图像并且不想修复他们
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这为您提供了几乎标准模式。请注意，如果您使用表格中的切片图像，您的布局可能会中断稍后转移到 HTML5（因此，完整的标准模式）。你故意想要怪癖模式

没有文档类型。

请不要这样做。故意为 Quirks 模式进行设计会困扰你、你的同事或你的继任者未来——甚至没有人关心 Windows IE 6（已经没有有人关心 Netscape 4.x 和 IE 5)。为 Quirks 模式设计是个坏主意。相信我。

如果您仍想支持 Windows IE 6，最好使用条件 cmets 对其应用特定的 hack，而不是回归其他浏览器进入 Quirks 模式。

我不推荐任何 XHTML 文档类型，因为提供 XHTML 因为 text/html 被认为是有害的。如果您选择使用 XHTML doctype 无论如何，请注意 XML 声明使 IE 6（但不是 IE 7！）触发 Quirks 模式。

【讨论】：

关于“就 CSS 而言，没有任何差异 [..] 与不同的文档类型”：stackoverflow.com/questions/6857976/…。 HTML5 标题对我来说是新事物。
<section>/heading thing 可以作为文档类型使用错误 HTML 元素的情况而被忽略。 other article 在 spacer.gif 和“基于表格的布局”中迷失了我，并且很长，所以我没有阅读它，但我明白这些是边缘情况。不过，老实说，我不确定，并且有一半的人认为发布该行会遭到反对。
是的，我同意重写 CSS 部分，这发生在我身上。在一个 div 中，我创建了一个类名 .l600 { left: 600}，它用于在没有的情况下在浏览器上正常渲染。但是一旦我在我的 html 中添加。浏览器简单地省略 .l600 类，因为没有提到“px”单元。所以我怀疑一旦我们添加 . 就严格需要单位

【解决方案2】：

问题是 div 设置为 100% 的 100%（主体），这对我们有意义，但对浏览器没有意义。如果将 body 位置设置为绝对位置并将其顶部、底部、左侧、右侧设置为 0，您将获得相同的效果，并且 div 的高度设置将按您期望的方式工作。这是代码。

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

【讨论】：

或者，您可以将元素的高度设置为 100%。但可能以上是更好的方法