Question

1）我的HTML页面没有正确应用Css样式，如果我在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>

另外，我试过代替HTML5，XHTML 1.0严格，

 <!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？

Answer 1

缺少doctype触发器quirks mode，这仅仅意味着在人们开始使用doctypes之前创建的“遗留代码”的向后兼容性。它几乎不应该被使用;你应该总是声明一个doctype。

选择哪一个？

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

<!DOCTYPE html>

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

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

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

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

选择Doctype

text / html的

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

标准模式，前沿验证
<!DOCTYPE html>
这是正确的做法，除非你有特殊的理由要避免它。使用此doctype，您可以验证新功能，例如 <video>，<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模式

没有doctype。

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

如果您仍想支持Windows IE 6，最好使用条件注释为其应用特定的黑客攻击而不是回归其他   浏览器进入Quirks模式。

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

Answer 2

问题是div被设置为100％（正文）的100％，这对我们而言不是对浏览器。如果将主体位置设置为绝对并将其顶部，底部，左侧，右侧设置为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>

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

2 个答案:

选择哪一个？

选择Doctype

没有doctype。