Comment puis-je garantir une largeur d'élément cohérente dans tous les navigateurs ?

Largeur des éléments et dimensionnement de la boîte :** Unifier le comportement du navigateur

Dans la conception Web, la largeur d'un élément peut devenir une source de confusion due aux différentes interprétations des différents navigateurs. Internet Explorer et Firefox, par exemple, ont historiquement traité cet aspect différemment.

Le modèle Border-Box d'IE par rapport au modèle Content-Box de FF

Traditionnellement, Internet Explorer utilisait le modèle "border-box", où la largeur de l'élément incluait à la fois le remplissage et les bordures. Par conséquent :

foo {

width : 10em;
padding : 2em;
border : 1em;
}

rendrait un élément de 10em de large.

En revanche, Firefox et d'autres les navigateurs conformes aux normes utilisent par défaut le modèle « content-box ». Ici, la largeur de l'élément exclut le remplissage et les bordures. Ainsi, le même CSS donnerait un élément de 16em de large :

foo {

width: 10em;
padding: 2em;
border: 1em;
>

Réaliser Cohérence

Pour harmoniser le comportement entre les navigateurs, les développeurs peuvent utiliser la propriété box-sizing. En le définissant sur "border-box":

• {
  box-sizing: border-box;

ou :<br>*{

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box

}

Conforme aux normes modernes les navigateurs, y compris Firefox, peuvent être contraints d'adopter le modèle « border-box ». Cette déclaration prend également en charge les navigateurs basés sur Opera et Webkit comme Chrome.

Cependant, notez que Webkit ne prend en charge le modèle « padding-box » via aucune déclaration.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!