le dimensionnement de la boîte n'est pas hérité via l'élément DETAILS ?
P粉618358260
P粉618358260 2024-02-21 16:31:32
0
2
402

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粉618358260
P粉618358260

répondre à tous(2)
P粉530519234

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?
P粉217629009

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal