box-sizing は DETAILS 要素を通じて継承されませんか?

Question

box-sizing を継承する一般的な手法を使用すると、DETAILS 要素に正しい値がある場合でも、その値は DETAILS 要素の子要素には継承されません。

コード スニペットの例では、DETAILS 要素の外側の DIV はボックス サイズ設定を継承します (期待どおり、必要な場合) が、DETAILS 要素内の DIV は継承しません。検証には DevTools を使用できます。

Firefox と Chrome は両方ともこの動作を示します。その行動は正しいのでしょうか？

リーリー リーリー

Answer 1

これは既知の問題のようです。box-sizing プロパティが details 要素内の子要素に適切に継承されません。いくつかの情報源によると、これは一部のブラウザ レンダリング エンジンのバグが原因であるとのことです。この問題を解決するには、次のコードを追加して、details 要素内の要素の box-sizing 属性を明示的に設定します。

リーリー リーリー

Answer 2

一般に、Chrome と Firefox が同じ驚くべき動作を示す場合、それは正しいと言っても過言ではありません。

これも例外ではありません。 HTML5標準表現:

つまり、スロットは実際にはスタイルを持つ要素であり、detail 要素の子要素は、detail 要素のスタイルではなく、そのスタイルを継承します。 *、*::after、*::before はスロットに一致しないため、div は box-sizing の初期値、つまり content- を継承します。箱＃ ＃＃。