16

1）Css 样式未正确应用于我的 HTML 页面，如果我在 html 上添加特定版本，如 HTML5、HTML4.1 strict 等，如果我删除所有 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）也是现在最好的版本。带有 XHTML 的 HTML5 或 html4.01 或 HTML 4.01？

4

2 回答 2

25

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

选择哪一个？

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

<!DOCTYPE html>

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

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

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

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

选择文档类型

文本/html

简而言之：以下是为新的 text/html 文档选择 doctype 的简单指南：

标准模式，前沿验证

<!DOCTYPE html>

这是正确的做法，除非您有特定的理由避免这样做。<video>使用此 doctype，您可以验证新功能，例如 <canvas>和 ARIA。请务必在最新版本的顶级浏览器中测试您的页面。标准模式，遗留验证目标

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

此 doctype 也触发标准模式，但让您坚持使用遗留验证，以防您想要避免新功能或更精确地验证旧功能。您想使用标准模式，但您在表格布局中使用切片图像并且不想修复它们

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

这为您提供了几乎标准模式。请注意，如果您稍后迁移到 HTML5（以及因此，完整的标准模式），您基于表格中的切片图像的布局可能会中断。你故意想要 Quirks 模式

没有文档类型。

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

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

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

于 2012-04-30T08:10:29.150 回答
14

问题是 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>
于 2012-04-30T08:18:10.220 回答