Question

所以我有一个基本的2列HTML布局，我已经应用了一些基本的CSS：

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？（我已经使用拼图进行了验证，并且没有显示任何错误/警告。）

Answer 1

因为你错过了DOCTYPE - 真的应该在那里开始 - 你的页面正在以怪癖模式呈现。在怪癖模式下，已知浏览器将body的高度拉伸到视口高度的100％。在标准模式下，由具有适当的DOCTYPE触发，body的行为类似于常规块级元素，默认情况下仅与其内容一样高。在您的情况下，这会导致body的背景颜色不可见。

您的CSS没有任何内在错误，这就是它验证的原因，但如果您希望body在标准模式下伸展到视口的高度，则应将以下高度属性添加到{{1}分别和html：

body

使用HTML5 DOCTYPE时，background-color属性无法正常工作

1 个答案: