3

所以我有一个基本的 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？（我已经用拼图进行了验证，它没有显示任何错误/警告。）

4

1 回答 1

5

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

你的 CSS 本身没有任何问题，这就是它验证的原因，但如果你想body在标准模式下拉伸到视口的高度，你应该分别添加以下高度html属性body：

html {
  height: 100%;
}

body {
  min-height: 100%;
}
于 2012-08-25T22:21:58.070 回答