如果使用DOCTYPE，Css样式不能正确应用 [英] Css styles not applied properly,if use DOCTYPE
问题描述
1）Css样式不能正确应用到我的HTML页面，如果我添加特定版本的html像HTML5，HTML4.1严格等，如果我删除所有DOCTYPE语句，它工作正常。
1)Css styles not applied properly to my HTML page,if i add particular version on html like HTML5,HTML4.1 strict,etc.,If i remove all DOCTYPE statements,it works fine.
我的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） / p>
My HTML code(background color red not applied with 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 strict，
Also, i tried instead of HTML5, XHTML 1.0 strict,
<!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">
但不适用任何一个。如何正确添加版本。
But not works any one.How to add version properly.
2）也是现在最好的版本。 HTML5或html4.01或HTML 4.01 with XHTML？
2) Also which is best version now. HTML5 or html4.01 or HTML 4.01 with XHTML?
推荐答案
问题是div设置为100％ （身体）这使得sence给我们，但不是浏览器。如果你将body位置设置为absolute，并设置它的上，下，左，右到0，你会得到相同的效果，div的高度设置将按照你期望的方式工作。这里是代码。
The problem is that the div is set to 100% of 100% (the body) this makes sence to us but not to the browser. If you set the body position to absolute and set it's top, bottom, left, right to 0, you get the same effect and the div's height setting will work the way you expect. Here's the code.
<!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样式不能正确应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
