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

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

html css

Html 如果使用DOCTYPE，则未正确应用Css样式,html,css,Html,Css,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%;">

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>

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


试验
我的测试页面

我的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>

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


试验
我的测试页面

另外，我试着用XHTML1.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">

以及

但任何一个都不行。如何正确添加版本

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

缺少doctype触发器，这意味着仅用于向后兼容在人们开始使用doctype之前创建的“遗留代码”。它几乎不应该被使用；您应该始终声明doctype

选择哪一个？在这个时代，这就是你所需要的：

<!DOCTYPE html>

如果愿意，可以继续将XHTML语法用于此doctype。就CSS而言，我知道不同的doctype没有任何区别，只要你有一个。但是，doctype将更改哪些属性和元素有效，以及在哪些上下文中有效。使用来测试您的HTML

不幸的是，这意味着您将重写大部分CSS以在标准模式下工作。我知道这听起来很烦人，但你得咬紧牙关重写它

前进的重要注意事项：删除内联CSS并使用外部样式表，否则（除其他外）您将发现维护是一场噩梦

感兴趣的：

选择Doctype 文本/html

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

标准模式，前沿验证

<!DOCTYPE html>

这是正确的做法，除非你有特定的理由避免它。使用此doctype，您可以验证新功能，例如

，

和ARIA。请确保在中测试您的页面顶级浏览器的最新版本。标准模式，遗留验证目标

此doctype还触发标准模式，但允许您在希望避免新功能或更多功能的情况下坚持旧式验证精确验证旧功能。您希望使用标准模式，但您在表布局中使用切片图像，并且不希望修复他们

这将为您提供近乎标准的模式。请注意，基于表中切片图像的布局可能会在以下情况下中断：后来转向HTML5（也就是全标准模式）。你故意想要怪癖模式

没有doctype。请不要这样做。任性地为怪癖模式设计会困扰你、你的同事或你的继任者未来，甚至没有人再关心Windows IE 6（已经没有了人们关心的是网景4.x和IE 5）。为怪癖模式设计这是个坏主意。相信我

如果您仍然希望支持Windows IE 6，那么最好使用条件注释对其应用特定的黑客攻击，而不是倒退其他攻击浏览器进入怪癖模式

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

问题是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>


试验
我的测试页面

或者，您可以将图元的高度设置为100%。但是，对于“就CSS而言，不同的doctype之间没有任何差异[…]这一点，上述可能是一种更好的方式”：。HTML5标题这件事对我来说是新鲜事。可以将其视为对doctype使用了错误的HTML元素。我在

spacer.gif

和“基于表格的布局”中读到了这本书，它相当长，所以我没有读过，但我得到的要点是，这些都是边缘案例。老实说，我并不确定，有一半的人认为仅仅是发布这一行就会遭到否决。是的，我同意重写CSS部分，这发生在我身上。在一个div中，我创建了一个类名.l600{left:600}，用于在浏览器上渲染OK，而不使用。但一旦我加入我的html。浏览器简单省略。l600类，因为并没有提到“px”单元。因此，我怀疑，一旦我们增加了，就需要严格的单位。

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