为何box-sizing无法通过DETAILS元素传递给其子元素？

使用常见的box-sizing继承技巧（通过html设置border-box，让所有元素继承这个值）时，会遇到一个问题：DETAILS元素本身的box-sizing值是正确的，但它的子元素却没法继承该值。比如示例里，DETAILS外面的DIV正常继承了box-sizing，但内部的DIV就不行，用DevTools能验证这一点，而且Firefox和Chrome都有这个表现，那这个行为符合规范吗？

示例代码 #

CSS #

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

HTML #

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

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

答案 #

这个行为是符合规范的。

CSS规范里规定，details元素内部除了summary之外的内容，浏览器会自动创建一个隐式的div容器（这个容器不会出现在DOM结构里）来包裹。这个隐式容器的box-sizing被浏览器默认设为content-box，而且你的*选择器只能匹配DOM中存在的元素，管不到这个隐式容器，所以它不会继承details的border-box。而你写的details内部的DIV，其实是这个隐式容器的子元素，它继承的是隐式容器的content-box，不是直接继承details的属性。

要解决这个问题，最简单的办法就是给details的所有子元素显式设置继承规则：

details * { box-sizing: inherit; }

内容的提问来源于stack exchange，提问作者Johnny Cee