< body> background-color属性无法与HTML5 DOCTYPE正常工作 [英] <body> background-color property doesn't work correctly with HTML5 DOCTYPE
问题描述
所以我有一个基本的2列HTML布局，我已经应用了一些基本的CSS：
So I've got a basic 2-column HTML layout that I've applied some basic CSS to:
html {
background-color: gray;
}
body {
width: 900px;
background-color: white;
margin: 0 auto;
overflow: hidden;
}
.logo, .nav, .contact {
float: left;
width: 248px;
border: 1px black solid;
}
.about, .banner, .content {
float: right;
width: 648px;
border: 1px black solid;
}
问题是，当我添加 ;！DOCTYPE html> 声明到我的页面的开头， background-color 属性不适用于 body 标记。我认为这有一些与它默认的怪异模式没有DOCTYPE，但我做错了，可能是无效的CSS？ （我已经验证了拼图，它不显示任何错误/警告。）
The problem is, the when I add the <!DOCTYPE html> declaration to the beginning of my page, the background-color attribute doesn't work for the body tag. I assume this has something to do with it defaulting to quirks mode without the DOCTYPE, but what am I doing wrong that might be invalid CSS? (I've validated with jigsaw and it doesn't show any errors/warnings.)
推荐答案
因为你缺少DOCTYPE - 这真的应该在那里开始 - 你的页面正在呈现在怪异模式。在怪异模式中，已知浏览器将 body 的高度拉伸到视口高度的100％。在标准模式下，由具有适当的DOCTYPE触发， body 的行为像一个常规的块级元素，默认情况下只有它的内容高度。在你的情况下，这会导致 body 的背景颜色不可见。
Because you were missing the DOCTYPE — which really should have been there to begin with — your page was being rendered in quirks mode. In quirks mode, browsers are known to stretch the height of body to 100% of the height of the viewport. In standards mode, which is triggered by having an appropriate DOCTYPE, body behaves like a regular block-level element, being only as tall as its contents by default. In your case, this results in body's background color not being visible.
CSS，这是为什么它验证，但如果你想要 body 伸展到标准模式下视口的高度，你应该添加以下高度属性到 html 和 body 分别：
There's nothing inherently wrong with your CSS, which is why it validates, but if you want body to stretch to the height of the viewport in standards mode, you should add the following height properties to html and body respectively:
html {
height: 100%;
}
body {
min-height: 100%;
}
这篇关于< body> background-color属性无法与HTML5 DOCTYPE正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
