Share
La norme CSS stipule que les bordures et le remplissage doivent être appliqués sur la largeur spécifiée d'un élément. En tant que tel, si j’ai une div de 200px et que j’applique une valeur de 40px de bordures et de marges, la largeur sera alors de 240px. Cela est parfaitement logique. Cependant, Internet Explorer a réellement fait les choses différemment. Ils ont adopté un modèle où la largeur maximale correspond à ce que vous avez spécifié. Les bordures et le remplissage sont ensuite factorisés dans cette largeur, réduisant ainsi la zone de contenu. En conséquence, la largeur de l'élément ne dépasse jamais la largeur indiquée de 200px.
Comme nous travaillons principalement avec des mises en page flottantes extrêmement sensibles, où même l’ajout d’une bordure 1px peut casser le design, je me demande: Internet Explorer at-il réussi??
«La propriété CSS de la taille de la boîte permet de modifier le modèle de boîte CSS par défaut utilisé pour calculer la largeur et la hauteur des éléments. Il est possible d'utiliser cette propriété pour émuler le comportement de navigateurs qui ne prennent pas correctement en charge la spécification de modèle de boîte CSS. ”
Cela signifie que si vous décidez que vous souhaitez imiter l'interprétation originale d'Internet Explorer du modèle de boîte, vous pouvez le faire. La valeur par défaut pour le dimensionnement de la boîte est «content-box». Cela signifie simplement que la largeur et la hauteur d'un élément n'incluent pas les bordures et le remplissage (ou les marges)..
En remplaçant cette valeur par «border-box», les valeurs de largeur et de hauteur comprendre les bordures et le rembourrage.
#box width: 200px; hauteur: 200px; fond: rouge; rembourrage: 10px; bordure: noir uni 10px; -moz-box-dimensionnement: border-box; -webkit-box-dimensionnement: border-box; taille de la boîte: boîte-frontière;
Parce que nous avons déclaré taille de la boîte avec une valeur de «border-box», la largeur finale de l'élément #box, décrite ci-dessus, sera de 200px.
Surtout pour les dispositions flottantes, cela peut vous éviter beaucoup de maux de tête! Mais avec cela dit, je suis encore indécis. Que pensez-vous de l'interprétation d'Internet Explorer du modèle de boîte??
Accentsconagua