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

Question

ボックス サイズを継承する一般的な手法を使用すると、DETAILS 要素に正しい値がある場合でも、その値は DETAILS 要素の子要素には継承されません。コード スニペットの例では、DETAILS 要素の外側の DIV はボックス サイズ設定を継承します (期待どおり、必要な場合) が、DETAILS 要素内の DIV は継承しません。検証には DevTools を使用できます。 Firefox と Chrome の両方でこの動作が発生します。その行動は正しいのでしょうか？ *,*::後,*::前{ボックス-si

P粉530519234 · Answer

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

リーリーリーリー

P粉217629009 · Answer

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

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

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