如何解决Chrome与Firefox中<details>/<summary>的外边距折叠差异

云原生阿岚

2026-8-5

跨浏览器兼容：

元素外边距折叠问题解决方案

问题重现代码

CSS 代码

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

HTML 代码

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

浏览器渲染差异

当<details>仅包含<summary>元素时，Chrome（v110）仅在<details>展开状态下，会将第一个<summary>的下外边距与第二个<summary>的上外边距触发外边距折叠（margin collapse）；而Firefox（v108）无论<details>是展开还是折叠状态，都会触发该外边距折叠，导致跨浏览器渲染不一致。

兼容需求

需编写跨浏览器一致的CSS，满足以下要求：

仅含<summary>的<details>，其展开/折叠状态完全不影响元素间的间距与外边距；
展开与关闭状态的空<details>之间的外边距保持一致。

解决方案

通过为<details>创建块级格式化上下文（BFC），阻止内部<summary>的外边距与外部元素的外边距发生折叠，即可实现跨浏览器一致渲染。推荐使用display: flow-root（现代浏览器支持，语义化更优）：

* {border:0; margin:0; padding:0; vertical-align:baseline;}
details {
  margin:0;
  display: flow-root; /* 创建BFC，隔离内部外边距与外部元素 */
}
details summary {margin: 1em 0 1em 1em;}

原理说明

块级格式化上下文（BFC）是CSS中的一个渲染区域，内部元素的布局不会影响外部元素。为<details>设置display: flow-root后，其内部<summary>的上下外边距将被限制在<details>容器内，不会与相邻<details>中的<summary>外边距发生折叠，无论<details>处于展开还是折叠状态，元素间的间距都能保持一致。