使用 XHTML 严格时，边框会影响背景颜色
假设我有以下简约的 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，它会按“预期”工作。我缺少什么？谢谢。
Let's say I have the following minimalistic HTML code:
<!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>
There's a gap at the top of the page, it seems as if only the H1's background is colored in lime, or as if the H1 is pushing down the parent div tag. However, if I add "border:solid 1px red;" to the div's style the entire div's background is in lime, not just H1's. I tested it with IE8, FF3.5, and Chrome. They all have the same behavior. If I remove the XHTML strict DocType it works as "expected." What am I missing? Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我“缺少”的是折叠边距的概念。通过指定 div 的边框，我可以有效地取消折叠边距，这给了我预期的结果。另一种取消折叠的方法是为 div 提供至少 1px 的填充。不幸的是，在我的情况下，这些都不可接受，即我不希望 div 上有边框或填充，所以我必须找到不同的解决方案，但至少它解释了这种行为。
What I was "missing" was the concept of collapsing margins. By specifying a border for the div I effectively un-collapse the margins which gives me the expected result. The other method to un-collapse would be to give the div at least a padding of 1px. Unfortunately neither of these is acceptable in my situation, i.e. I don't want a border or padding on the div, so I will have to find a different solution, but at least it explains the behavior.