Pourquoi « margin : 0 auto » centre-t-il les éléments différemment en mode standard IE8 ?-tutoriel CSS-php.cn

Pourquoi « margin : 0 auto » centre-t-il les éléments différemment en mode standard IE8 ?

DDD

Libérer： 2024-12-05 03:35:11

original

439 Les gens l'ont consulté

Why Does `margin: 0 auto` Center Elements Differently in IE8 Standard Mode?

Comprendre la marge : 0 comportement automatique dans Internet Explorer 8

Le comportement de la marge : 0 propriété automatique dans Internet Explorer 8 peut être déroutant, surtout par rapport à sa gestion dans d’autres navigateurs. Pour remédier à ces divergences, cet article examine les comportements spécifiques au navigateur et fournit des références aux spécifications pertinentes.

Dans le cas particulier d'un bouton centré utilisant margin: 0 auto, le comportement dans IE8 diffère de celui des autres navigateurs. Le code suivant le démontre :

HTML :

<div>

Copier après la connexion

En mode de compatibilité Firefox, Opera, Safari, Chrome, IE7 et IE8, le bouton est centré, tandis qu'en mode standard IE8, ce n'est pas le cas.

Pour résoudre cette incohérence, il est recommandé d'ajouter un DOCTYPE au document HTML, comme démontré ci-dessous :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copier après la connexion

Avec ce DOCTYPE, le mode standard d'IE8 centrera également correctement le bouton en utilisant margin: 0 auto.

Concernant les questions spécifiques soulevées :

Affichage : bloc et élément Largeur :
- Selon la spécification CSS2.1, le paramètre "display: block" ne définit pas de largeur spécifique pour l'élément.
- Cependant, la plupart des navigateurs interprètent " display: block" pour définir la largeur à 100% ou la largeur disponible. Ce comportement n'est pas garanti par la spécification.
Marge : 0 auto et alignement des éléments :
- Lorsque "affichage : block" est défini, "margin: 0 auto" est interprété différemment par les navigateurs.
- Le mode standard IE8 ne respecte pas "margin: 0 auto" pour les éléments de niveau en ligne comme les boutons de saisie. Cela contredit la spécification CSS2.1, qui stipule que "margin: 0 auto" doit centrer les éléments au niveau du bloc.

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!