gpt4 book ai didi

css - margin 有时工作有时不在不同的文档类型下

转载 作者:太空宇宙 更新时间:2023-11-03 21:41:28 25 4
gpt4 key购买 nike

考虑以下 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><h3>不起作用,但如果我使用 <!DOCTYPE HTML> , margin有效。

更重要的是,当我添加

h3 {
margin: 25px 0;
}

到样式,margin他们中的一些人甚至使用 HTML 4.0 突然工作文档类型!

为什么会发生这种奇怪的行为? IE 和 Chrome 在这个问题上的表现是一样的,这是设计使然还是什么的,这让我很困惑。

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

最佳答案

问题是在 Quirks Mode 的某些上下文中抑制默认 上边距.因此,如果您出于某种原因使用 Quirks 模式(并且使用遗留页面通常是一个很好的理由),您应该明确设置您希望元素具有的任何垂直边距。另一个解决方案是摆脱怪癖模式,拍打 <!doctype html>在一开始,但这可能会完全毁掉(或者可能只是扰乱一点)你的页面,如果它们被创建以便它们的呈现依赖于浏览器中的错误行为和怪异行为。

这个问题可以用一个简单的独立文档(没有 CSS)来证明:

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

在“123”之前的开头以及“Some text”之前的单元格内部有一个空白区域,大约一个空行。如果<!doctype html>被移除,间距消失(但其他边距被保留)。

此问题在 10.3.10 Margin collapsing quirks 部分有详细描述在 HTML5 CR 中:“在 quirks 模式下,任何具有默认边距的元素 [例如 p 或 h3] 是 body、td 或 th 元素的子元素,并且没有实质性的先前 sibling ,都应具有用户代理级样式将其 'margin-top' 属性设置为零的工作表规则。”

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

关于css - margin 有时工作有时不在不同的文档类型下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23259885/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com