使用继承 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>
这似乎是一个已知问题，box-sizing 属性无法被 details 元素内的子元素正确继承。据一些消息来源称，这是由于某些浏览器渲染引擎中的错误造成的。要解决此问题，您可以添加以下代码来显式设置 details 元素内的元素的 box-sizing 属性：
details div { box-sizing: inherit; }一般来说，可以很肯定地说，如果 Chrome 和 Firefox 表现出相同的令人惊讶的行为，那么它就是正确的。
这也不例外。 HTML5 标准表示：
因此，插槽实际上是具有样式的元素，并且详细信息元素的子元素继承该样式，而不是详细信息元素的样式。而由于
*、*::after、*::before不会匹配slot，所以div继承的是box-sizing的初始值，即content-box。