Pourquoi les navigateurs diffèrent-ils dans la façon dont ils calculent la largeur des éléments HTML, y compris le remplissage ?

Question : Variation du calcul de la largeur des éléments entre les navigateurs

Dans différents navigateurs Web, il existe une différence dans la façon dont la largeur d'un élément HTML est calculé par rapport au rembourrage. Dans Internet Explorer, le remplissage est inclus dans la mesure de la largeur, alors que dans Firefox, il ne l'est pas.

Comprendre le modèle de boîte

Pour comprendre ce comportement, nous devons savoir à propos du modèle de boîte en CSS. Chaque élément HTML se voit attribuer une boîte composée de quatre parties :

• Zone de contenu : contient le contenu réel de l'élément.
• Padding : espace autour du contenu.
• Bordure : la ligne autour du rembourrage.
• Marge : l'espace à l'extérieur du border.

Modèle standard "Content-Box"

La plupart des navigateurs modernes, y compris Firefox, utilisent le modèle standard "content-box". Dans ce modèle, la largeur d'un élément inclut uniquement la zone de contenu, à l'exclusion du remplissage et des bordures.

Modèle "Border-Box" non standard

Internet Explorer, dans les anciennes versions, utilisait le modèle "border-box" non standard. Dans ce modèle, la largeur d'un élément inclut le remplissage et les bordures, ce qui fait apparaître l'élément plus grand.

Rendre les navigateurs cohérents

Pour rendre le comportement cohérent entre les navigateurs, nous peut utiliser la propriété box-sizing. Cette propriété nous permet de spécifier quel modèle de boîte les navigateurs doivent utiliser.

* {
  box-sizing: border-box;
}

En définissant box-sizing sur border-box, nous forçons tous les navigateurs à utiliser ce modèle dont la largeur inclut le remplissage et les bordures. Cela fera apparaître l'élément de la même taille dans Internet Explorer et Firefox.

Remarques supplémentaires :

• Opera nécessite une déclaration spécifique pour prendre en charge le dimensionnement des boîtes. : border-box.
• Les navigateurs WebKit (Safari et Chrome) ne prennent pas en charge la boîte padding-box model.
• Les anciennes versions d'IE peuvent nécessiter un doctype valide et des en-têtes appropriés pour adhérer au modèle de boîte standard.

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!