Question

考虑以下HTML代码：

<style>
    td {
        padding: 5px;
    }
</style>
<p>
    1233
</p>
<table>
    <tr>
        <td>
            <h3>Some text</h3>
        </td>
    </tr>
</table>

如果我使用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">，则margin和<p>的{{1}}不起作用，但如果我使用<h3>，<!DOCTYPE HTML>的工作原理。

当我添加

时，还有什么

margin

对于样式，即使使用h3 { margin: 25px 0; } doctype，它们的margin也会突然发挥作用！

为什么会发生这种奇怪的行为？ IE和Chrome在这个问题上表现相同，这是设计还是其他什么，它让我很困惑。

我有很多页面依赖于这种奇怪的行为，当我从其他新组件中带来一些CSS时，他们定义了边距然后突然所有这些旧页面都破了。所以我想知道到底发生了什么。

Answer 1

问题是Quirks Mode中某些上下文中默认上边距的抑制。因此，如果出于某种原因使用Quirks模式（并且使用遗留页面通常是一个非常好的理由），则应明确设置要为元素设置的任何垂直边距。另一个解决方案是离开Quirks模式，一开始就拍打<!doctype html>，但这可能会完全破坏（或者只是打扰一下）你的页面，如果它们已被创建，那么它们的渲染依赖于bug浏览器中的行为和怪异。

可以使用简单的独立文档（没有CSS）来证明这个问题：

<!doctype html>
<p>
    1233
</p>
<table border>
    <tr>
        <td>
            <h3>Some text</h3>
        </td>
    </tr>
</table>

在“123”之前的开头和“Some text”之前的单元格内部有一个空行，大约有一个空行。如果删除<!doctype html>，则该间距消失（但保留其他边距）。

HTML5 CR中的10.3.10 Margin collapsing quirks部分详细描述了这个问题：“在怪癖模式下，任何具有默认边距[如p或h3]的元素都是body，td或th元素的子元素没有实质性的兄弟姐妹预计将有一个用户代理级别样式表规则，设置其边缘顶部＆＃39;财产归零。“

此功能涉及浏览器在上下文中抑制顶部边距的传统，它们通常无用甚至令人不安。例如，如果标题元素或p元素是文档正文或表格单元格中的第一个元素，则无需将其与前面的内容分开。这种做法早于CSS的普遍可用性。

Answer 2

我真的不知道hapening是什么，但那就是你在HTML PUBLIC＆＃34; - // W3C // DTD HTML 4.0 Transitional // EN＆＃34;它不是真正的边缘它是一些浏览器初始样式，你可以在chrome dev工具中看到它们：-webkit-margin-before，和-webkit-margin-after;这种风格由边缘提供。

有关更多信息，您最好阅读W3C的规范，并使用doctype html，或者html 4.0 strict。

保证金有时候工作有时不会处于不同的doctype之下

2 个答案: