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

zphenhs4  于 2023-01-15  发布在  Go
关注(0)|答案(1)|浏览(205)

仔细看看这个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。收集潜在的相关阅读在这里:

2w2cym1i

2w2cym1i1#

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

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

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

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

相关问题