le dimensionnement de la boîte n'est pas hérité via l'élément DETAILS ?

Question

En utilisant la technique courante d'héritage du dimensionnement de la boîte, même si l'élément DETAILS a la valeur correcte, cette valeur ne sera pas héritée par les enfants de l'élément DETAILS.

Dans l'exemple d'extrait de code, le DIV à l'extérieur de l'élément DETAILS hérite du dimensionnement de la boîte (comme prévu et requis), mais pas le DIV à l'intérieur de l'élément DETAILS. Vous pouvez utiliser DevTools pour la vérification.

Firefox et Chrome présentent tous deux ce comportement. Le comportement est-il correct ?

*, *::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粉530519234 · Answer

Cela semble être un problème connu où l'attribut box-sizing n'est pas correctement hérité par les éléments enfants au sein de l'élément details. Selon certaines sources, cela serait dû à un bug dans certains moteurs de rendu des navigateurs. Pour résoudre ce problème, vous pouvez ajouter le code suivant pour définir explicitement l'attribut box-sizing de l'élément à l'intérieur de l'élément details :

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    Summary
    Box sizing inside Details?

details div {
  box-sizing: inherit;
}

Box sizing outside Details?


    Summary
    Box sizing inside Details?

P粉217629009 · Answer

En général, on peut dire sans se tromper que si Chrome et Firefox présentent le même comportement surprenant, alors c'est correct.

Cela ne fait pas exception. Représentation standard HTML5 :

Donc, l'emplacement est en fait un élément qui a un style, et les éléments enfants de l'élément de détail héritent de ce style, pas du style de l'élément de détail. Et à cause de *、*::after、*::before不会匹配slot，所以div继承的是box-sizing的初始值，即content-box.