box-sizing 不通过 DETAILS 元素继承？

Question

使用继承 box-sizing 的通用技术，即使 DETAILS 元素具有正确的值，该值也不会被 DETAILS 元素的子元素继承。

在示例代码片段中，DETAILS 元素外部的 DIV 继承了 box-sizing（如预期和所需），但 DETAILS 元素内部的 DIV 则不然。您可以使用DevTools进行验证。

Firefox 和 Chrome 都表现出这种行为。行为正确吗？

*, *::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>

Answer 1

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

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    
Summary
    
Box sizing inside Details?

Answer 2

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

这也不例外。 HTML5 标准表示：< /p>

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