logo标签列表

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

htmlcss
3

我想知道为什么以下的 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中看起来相同。
图片描述：
woo
你的第一个div已经关闭，然后里面又有一个额外的</div>。 - Mark Schultheiss
3个回答
3

添加 DOCTYPE 声明会使浏览器在 [几乎] 标准模式下呈现页面，而不是在 怪异模式 下呈现。

1
但这不是一个答案，我猜问题应该重新表述为：“为什么这段代码不符合标准？” - UncleZeiv
0

这是格式极差的XHTML。

你提到的问题实际上是一个webkit问题。当你在一个元素上使用margin时，它会在margin空间中使用父元素的背景。相反，使用padding来解决这个问题：

<!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>
父元素是白色的。我看到我可以使用填充来解决这个问题，但我想知道是否有什么地方做错了。 - NibblyPig
我明白了，我的措辞有误。在创建模板时，我经常遇到这种情况，例如p标签具有内置的边距，并且是出现在内容div中的第一个元素。这只是我的解决方法。 - Riley
0

你在第一行关闭了body标签，然后又在最后一行关闭了一次。

发现得好，已经更改了，但没有任何区别。 - NibblyPig
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接