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 標準表示：

因此，插槽實際上是具有樣式的元素，而詳細資訊元素的子元素繼承該樣式，而不是詳細資訊元素的樣式。而由於*、*::after、*::before不會符合slot，所以div繼承的是box-sizing的初始值，即content-box。