如何以不同方式处理 chrome/firefox margin-collapsing <details>/<summary>？

Question

查看此 HTML/CSS 示例，观察 Chrome (v110) 和 Firefox (v108) 如何以不同方式呈现它们。

* {border:0; font-size:100%; font:inherit; 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> 之外是空的。 据我所知，Chrome 决定 margin collapse 第一个 <summary> 的底部边距和第二个 <summary> 的顶部边距仅当 <details> 打开时，而 Firefox 在任何一种情况下都会折叠它们。我正在构建一个语义“模板”，所以我想知道如何将 CSS 编写为 Firefox/Chrome 不可知论者。我想要：

• <details> 的打开/关闭是空的，除了他们的 <summary> 根本不影响间距/边距。
• 开盘、空 <details> 和收盘 <details> 之间的保证金一致。

您如何编写能够一致地呈现 HTML 的 CSS？

---

研究此浏览器差异后，Firefox 似乎是不符合 W3 标准的浏览器。请参阅此可能相关的CSS margin test。在这里收集了可能相关的阅读资料：

• SO: Do vertical margins collapse reliably and consistently across all browsers?
• SO: Cross-browser Issue: Min-height and collapsing margins
• SO: Firefox body margin bug?
• Chromium "Issue" 321295

Answer 1

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

宣布没有边距在<summary>；而是将它们放在<details> 中。

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

这是有道理的，因为 <details> 是这里的“块”元素，并且应该处理相对于 HTML 中任何其他块元素的边距。 <summary> 标签的默认值为 display:list-item; — 它实际上只是为了包含一些文本或单击以展开详细信息的内容。