为什么添加 DOCTYPE 会影响我的 CSS？答案

【问题标题】：Why does adding a DOCTYPE affect my CSS?为什么添加 DOCTYPE 会影响我的 CSS？
【发布时间】：2011-03-24 17:24:41
【问题描述】：

我想知道为什么在我放入文档类型之前，以下 HTML/CSS 呈现良好：

<body style="margin:0; padding:0; background-color:#eeeeee"></body>

<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>

<div style="width:100%; background-color:White; margin:0px; padding:0px">

<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">

text

</div>

</div>


</div>

</body>

我想要的是底部带有深灰色边框的标题（灰色条）。在此之下，我想要我的内容，它进入一个 100% 宽度的大 div，它是白色的（因为页面是灰色的）。上面的代码看起来不错，但是如果我将这一行添加到顶部：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

最里面的div的边距从白色变成灰色，所以页面看起来不对。

谁能解释为什么？我正在使用 IE8 进行测试，但在 Chrome 中看起来是一样的。

图片说明：

【问题讨论】：

你的第一个 div 已经关闭，然后里面多了一个
。

标签： html css

【解决方案1】：

添加 DOCTYPE 声明会导致浏览器以 [几乎] 标准模式而不是 quirks mode 呈现页面。

【讨论】：

但这不是答案，我想问题应该重新表述为：“为什么这段代码不符合标准？”

【解决方案2】：

您将在第 1 行关闭 body 标记，然后在最后一行再次关闭。

【讨论】：

发现不错，改了但没区别

【解决方案3】：

这是非常糟糕的 XHTML。

您所指的问题实际上是一个 webkit 问题。当您在元素上使用边距时，它会使用边距空间中父元素的背景。而是使用填充来解决这个问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body style="margin:0; padding:0; background-color:#eee">
        <div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
        <div style="width:100%; background-color:#fff; margin:0px; padding:0px">
            <div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
                text
                <br /><br /><br />
            </div>
        </div>
    </body>
</html>

【讨论】：

父元素是白色的。我发现我可以使用填充来解决这个问题，但我试图了解我是否做错了什么。
我明白了，我措辞错误。我在创建模板时经常遇到这种情况，其中 p 标签等元素内置在边距中，并且是第一个出现在内容 div 中的元素。这只是我的工作。