Question

假设我有以下简约HTML代码：

<!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" >
<body style="background-color:silver; padding:0px; margin:0px;">
  <div style="background-color:Lime;">
    <h1>Title</h1>
  </div>
</body>
</html>

页面顶部有一个间隙，看起来好像只有H1的背景是灰色的，或者好像H1正在按下父div标签。但是，如果我添加“border：solid 1px red;”对于div的风格，整个div的背景都是石灰，而不仅仅是H1。我用IE8，FF3.5和Chrome测试了它。他们都有相同的行为。如果我删除XHTML严格的DocType，它就像“预期的”一样工作。我错过了什么？感谢。

Answer 1

我“失踪”的是collapsing margins的概念。通过指定div的边框，我有效地解除了边距，这给了我预期的结果。另一种解除崩溃的方法是给div至少填充1px。不幸的是，在我的情况下这些都不可接受，即我不想在div上使用边框或填充，所以我必须找到不同的解决方案，但至少它解释了行为。

使用XHTML严格边框会影响背景颜色

1 个答案: