<!DOCTYPE html> 影响表格的高度答案

【问题标题】：<!DOCTYPE html> affecting height of a table<!DOCTYPE html> 影响表格的高度
【发布时间】：2021-12-21 22:58:46
【问题描述】：

在以下 HTML 顶部添加 <!DOCTYPE html> 时，表格的高度会发生变化，因为 p 的边距包含在 td 元素中：

<!DOCTYPE html>
<html>
    <body>
        <table>
            <tbody>
                <tr>
                    <td style="border: solid 1px black;">
                        <p>test</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

例如在 Chrome 中：

与<!DOCTYPE html>:
没有<!DOCTYPE html>：。

我知道省略 DOCTYPE 会使浏览器呈现怪异模式，并且该文档将不是有效的 HTML，但我仍在寻找一种样式技巧以使它们呈现相同（至少在 Chrome 中） -理想情况下更改与表格相关的样式而不是 p 的样式。

在我的辩护中：我将在不同的上下文中渲染一个相同的 HTML，有和没有<!DOCTYPE html>，后者是我无法控制的第三方组件。

【问题讨论】：

试试这个* { box-sizing: border-box; } - reference
如果缺少文档类型，则 HTML5 无效，因此浏览器可以使用它选择的任何古怪的呈现模式。请参阅html.spec.whatwg.org/multipage/syntax.html#the-doctype：“出于遗留原因，需要 DOCTYPE。 当省略时，浏览器倾向于使用与某些规范不兼容的不同呈现模式。”
@user2864740 你是对的。但是碰巧我在第三方组件中渲染了这个 HTML，它创建了iframe 而没有在里面添加<!DOCTYPE html>。
@AhmedTagAmer 刚刚尝试过，但似乎不起作用。
您是否联系过创建该组件的第 3 方？如果他们听取错误请求，则无需头疼。他们可以生成有效的 HTML。

标签： html doctype quirks-mode

【解决方案1】：

首先，具体的怪癖。这（几乎）¹在 HTML5 规范的15.3.9 Margin collapsing quirks 中进行了描述。其中的相关部分是

在 quirks 模式下，任何具有默认边距的元素都是一个 body、td 或 th 元素并且没有实质性的先前兄弟是期望有一个用户代理级别的样式表规则来设置它的 'margin-block-start' 属性为零。

在 quirks 模式下，任何作为 td 或 th 元素的子元素的 p 元素并且没有实质性的后续兄弟姐妹，预计会有一个设置其'margin-block-end'的用户代理级别样式表规则属性为零。

15.3.3 Flow content 中描述了正常的边距行为，它给出了这个规则：

blockquote, figure, listing, p, plaintext, pre, xmp {
  margin-block-start: 1em; margin-block-end: 1em;
}

由于 quirks 模式效果是一个用户代理规则，我们可以简单地将这种正常的边距行为明确地包含在我们的 CSS 中。

因此，对于您的情况，要使 quirks 模式的行为类似于标准模式，您可以添加所有内容：

p {
  margin-block-start: 1em; 
  margin-block-end: 1em;
}

或者（同样，对于你的情况）使标准模式表现得像你可以添加的怪癖模式

td p {
  margin-block-start: 0; 
  margin-block-end: 0;
}

¹ 我说“几乎”，因为 Chrome 和 Firefox 似乎都不完全遵循这些规则。根据规则，如果 p 元素被包装在 td 元素内的 div （例如）元素中，那么 p 元素的边距应该在 quirks 模式下应用，就像它们在标准模式下一样。这就是 Firefox 所做的。但不是 Chrome。

另一方面，Firefox 似乎没有将 td 元素的前后伪元素视为应有的实质性内容，而 Chrome 则如此。

上面建议的修复不受这些差异的影响，但互操作问题使得通过将 CSS 应用于 td 元素来找到任何修复可能是不可能的。

【讨论】：