Boxgröße wird nicht durch das DETAILS-Element vererbt?

Question

Bei Verwendung der üblichen Technik der Vererbung der Boxgröße wird dieser Wert nicht von den untergeordneten Elementen des DETAILS-Elements geerbt, selbst wenn das DETAILS-Element den richtigen Wert hat.

Im Beispielcode-Snippet erbt der DIV außerhalb des DETAILS-Elements die Boxgröße (wie erwartet und erforderlich), der DIV innerhalb des DETAILS-Elements jedoch nicht. Sie können DevTools zur Überprüfung verwenden.

Firefox und Chrome zeigen beide dieses Verhalten. Ist das Verhalten korrekt?

*, *::after, *::before { box-sizing: inherit; }
html { box-sizing: border-box; }

<div>Box sizing outside Details?</div>

<details open>
    <summary>Summary</summary>
    <div>Box sizing inside Details?</div>
</details>

P粉530519234 · Answer

这似乎是一个已知问题，box-sizing 属性无法被 details 元素内的子元素正确继承。据一些消息来源称，这是由于某些浏览器渲染引擎中的错误造成的。要解决此问题，您可以添加以下代码来显式设置 details 元素内的元素的 box-sizing 属性：

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    Summary
    Box sizing inside Details?

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    Summary
    Box sizing inside Details?

P粉217629009 · Answer

一般来说，可以很肯定地说，如果 Chrome 和 Firefox 表现出相同的令人惊讶的行为，那么它就是正确的。

这也不例外。 HTML5 标准表示：

因此，插槽实际上是具有样式的元素，并且详细信息元素的子元素继承该样式，而不是详细信息元素的样式。而由于*、*::after、*::before不会匹配slot，所以div继承的是box-sizing的初始值，即content-box。