|
Le navigateur qui s'écartait historiquement du modèle de boîte CSS standard concernant la largeur était Internet Explorer en mode Quirks. .
Voici pourquoi :
* Modèle de boîte standard : Dans le modèle de boîte CSS standard, la propriété `width` spécifie la largeur de la zone de contenu d'un élément. Les largeurs de remplissage et de bordure sont ensuite ajoutées *au-dessus* de cette largeur de contenu pour déterminer la largeur totale de l'élément.
* Modèle de boîte en mode Quirks d'Internet Explorer (également connu sous le nom de « modèle de boîte brisée » ou de « modèle de boîte IE ») : En mode Quirks, Internet Explorer a calculé la largeur totale d'un élément *y compris* le remplissage et les bordures. Donc, si vous définissez `width:100px; remplissage : 10 px ; border:5px;` en mode Quirks, la largeur *totale* de l'élément serait de 100px et la zone de contenu serait réduite pour s'adapter au remplissage et aux bordures. Dans un navigateur conforme aux normes, la largeur totale serait de 100 px (contenu) + 20 px (remplissage) + 10 px (bordure) =130 px.
Mode bizarreries
Le mode Quirks était déclenché dans les anciennes versions d'Internet Explorer (en particulier IE5.5 et versions antérieures, et IE6 lorsque le document ne disposait pas d'un doctype approprié) pour afficher les pages Web telles qu'elles avaient été conçues pour ces anciens navigateurs. Cela a été fait pour maintenir la compatibilité ascendante et empêcher les sites Web plus anciens de se briser.
Navigateurs modernes et mode standards
Les versions modernes d'Internet Explorer (IE7 et versions ultérieures), ainsi que tous les autres principaux navigateurs (Chrome, Firefox, Safari, Edge), sont par défaut en Mode Standards. lorsqu'un doctype approprié est présent dans le document HTML. En mode Standards, ils implémentent correctement le modèle de boîte CSS standard.
Propriété CSS `box-sizing`
La propriété CSS `box-sizing` fournit un moyen de modifier le comportement du modèle de boîte. Lorsque vous définissez « box-sizing:border-box; » sur un élément, il se comportera comme l'ancien modèle de boîte IE Quirks Mode. Ceci est souvent utilisé pour simplifier les calculs de mise en page et faciliter la gestion des conceptions réactives.
En résumé :bien qu'aucun navigateur moderne activement utilisé ne brise intentionnellement le modèle de boîte standard par défaut, comprendre comment Internet Explorer le gérait en mode Quirks est historiquement important. L'utilisation de « box-sizing :border-box » est un moyen d'obtenir intentionnellement le comportement du « modèle de boîte IE » d'une manière compatible avec tous les navigateurs.
|
