如何科普chrome/firefox的边缘塌陷< details>< summary>？

zphenhs4 于 2023-01-15 发布在 Go

关注(0)|答案(1)|浏览(204)

仔细看看这个HTML/CSS示例，观察Chrome（v110）和Firefox（v108）如何不同地呈现它们。

* {border:0; margin:0; padding:0; vertical-align:baseline;}
details {margin:0;}
details summary {margin: 1em 0 1em 1em;}

<details>
  <summary>First</summary>
</details> 
<details>
  <summary>Second</summary>
</details>

第一个<details>标签除了<summary>外是空的。据我所知，只有当<details>打开时，Chrome才决定margin collapse第一个<summary>的底部边距和第二个<summary>的顶部边距。而Firefox在这两种情况下都会折叠它们。我正在构建一个语义"模板"，所以我想知道如何编写CSS是Firefox/Chrome不可知的。我想：

打开/关闭除<summary>外为空的<details>完全不影响间距/边距。
开放、空<details>和关闭<details>之间的边距一致。

如何编写CSS来一致地呈现HTML？
研究这个浏览器的差异，它似乎Firefox是一个不符合W3标准。查看这个潜在的相关CSS margin test。收集潜在的相关阅读在这里：

google-chrome

来源：https://stackoverflow.com/questions/75120877/how-to-cope-with-chrome-firefox-margin-collapsing-details-summary-differentl

1条答案

按热度按时间

2w2cym1i1#

撇开Firefox/Chrome的差异不谈，有一种方法可以完全避免这个问题。

在`<summary>`中声明 * 无边距 *;而是将它们放在`<details>`中。

details {margin: 1em 0 1em 1em;}
details summary {margin:0;}

这是有意义的，因为<details>是这里的“block”元素，应该处理相对于HTML中任何其他block元素的边距。<summary>标记有默认值display:list-item;-它实际上只是包含一些文本或一些东西，单击以展开细节。

赞(0）回复(0）举报 2023-01-15

我来回答

如何科普chrome/firefox的边缘塌陷< details>< summary>？

1条答案

在`<summary>`中声明 * 无边距 *;而是将它们放在`<details>`中。

相关问题

热门标签

最新问答

如何科普chrome/firefox的边缘塌陷< details>< summary>？

1条答案

在<summary>中声明 * 无边距 *;而是将它们放在<details>中。

相关问题

热门标签

最新问答

在`<summary>`中声明 * 无边距 *;而是将它们放在`<details>`中。