box-sizing 不通过 DETAILS 元素继承?
P粉618358260
P粉618358260 2024-02-21 16:31:32
0
2
401

使用继承 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>

P粉618358260
P粉618358260

全部回复(2)
P粉530519234

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

details div {
  box-sizing: inherit;
}
Box sizing outside Details?
Summary
Box sizing inside Details?
P粉217629009

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

这也不例外。 HTML5 标准表示

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板