使用继承 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 属性:
一般来说,可以很肯定地说,如果 Chrome 和 Firefox 表现出相同的令人惊讶的行为,那么它就是正确的。
这也不例外。 HTML5 标准表示:
因此,插槽实际上是具有样式的元素,并且详细信息元素的子元素继承该样式,而不是详细信息元素的样式。而由于
*、*::after、*::before
不会匹配slot,所以div继承的是box-sizing
的初始值,即content-box
。