CSS样式未正确应用，如果使用DOCTYPE。

Question

CSS样式未正确应用，如果使用DOCTYPE。

17

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 strict 替代 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？

- Ramprasad

2个回答

14

问题在于div的设定是100%的100%（即body），这对我们来说很有意义，但对浏览器却不一定。如果将body的位置设置为absolute并将其top、bottom、left、right设置为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>

- vdbuilder

另外，你也可以将<html>元素的高度设置为100％。但可能上述方法更好。 - Sunday Ironfoot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

没有文档类型会触发怪异模式, 它只是用于向后兼容"传统代码"，即在人们开始使用文档类型之前创建的代码。它几乎永远不应该被使用; 你应该始终声明一个文档类型。

选择哪一个？

在今天，这就是你需要的全部：

<!DOCTYPE html>

你可以继续使用XHTML语法，如果你愿意的话。就CSS而言，我没有意识到不同的文档类型之间有任何区别，只要你有一个文档类型即可。但是文档类型将更改哪些属性和元素是有效的以及在哪个上下文中是有效的。使用W3C验证器测试你的HTML。

不幸的是，这意味着你需要重写大部分CSS以适应标准模式。我知道听起来像是一项繁琐的工作，但你必须咬紧牙关并重写它。

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

有趣的是：http://hsivonen.iki.fi/doctype/#choosing

Choosing a Doctype

text/html

In a nutshell: Here are simple guidelines for choosing a doctype for a new text/html document:

Standards mode, cutting edge validation
<!DOCTYPE html>
This is the right thing to do unless you have a specific reason to avoid it. With this doctype, you can validate new features such as <video>, <canvas> and ARIA. Please be sure to test your page in the latest versions of the top browsers. Standards mode, legacy validation target
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This doctype also triggers the standards mode, but lets you stick to legacy validation in case you want to avoid new features or more precise validation of old features. You’d like to use the Standards mode, but you use sliced images in table layouts and don’t want to fix them
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This gives you the Almost Standards mode. Please note that your layouts based on sliced images in tables are likely to break if you later move to HTML5 (and, hence, the full Standards mode). You willfully want the Quirks mode

No doctype.

Please don’t do this. Willfully designing for the Quirks mode will come and haunt you, your coworkers or your successors in the future—when no one even cares about Windows IE 6 anymore (already no one cares about Netscape 4.x and IE 5). Designing for the Quirks mode is a bad idea. Trust me.

If you still want to support Windows IE 6, it is better to apply specific hacks for it using conditional comments than to regress other browsers into the Quirks mode.

I am not recommending any of the XHTML doctypes, because serving XHTML as text/html is considered harmful. If you choose to use an XHTML doctype anyway, please note that the XML declaration makes IE 6 (but not IE 7!) trigger the Quirks mode.