Question

我想知道为什么以下HTML / CSS呈现正常，直到我将doctype放入：

<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中看起来相同。

图片说明：

woo

Answer 1

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

Answer 2

你正在关闭第1行的body标签，然后再关闭最后一行。

Answer 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>

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

3 个答案: