Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments en mode standard IE8 et comment puis-je y remédier ?-tutoriel CSS-php.cn

Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments en mode standard IE8 et comment puis-je y remédier ?

Linda Hamilton

Libérer： 2024-11-26 05:29:09

original

690 Les gens l'ont consulté

Why Doesn't

Déclaration du type de document HTML et comportement de "margin: 0 auto;" dans Internet Explorer 8

Lorsque vous testez votre site Web dans Internet Explorer 8, vous pouvez rencontrer un problème où la « marge : 0 auto ; » la propriété ne centre pas vos éléments comme prévu. Cela est particulièrement évident dans le cas du code HTML suivant :

<div>

Copier après la connexion

Bien que ce code centre correctement le bouton dans la plupart des navigateurs, notamment Firefox 3, Opera, Safari, Chrome, IE7 et le mode de compatibilité IE8, il ne parvient pas à le faire en mode standard IE8.

Pour comprendre ce comportement, il est essentiel de comprendre le rôle des déclarations de type de document HTML. L'ajout d'une déclaration de type de document, telle que :

<!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

au début de votre document peut résoudre le problème et centrer correctement le bouton en mode standard IE8. En effet, la déclaration du type de document spécifie la version HTML utilisée, permettant au navigateur d'interpréter le code selon les normes correctes.

En ce qui concerne le comportement de "margin: 0 auto;" en général, les navigateurs le gèrent différemment en fonction de la propriété « display » de l'élément. Voici une répartition :

Si "display: block" est défini :
L'élément aura une largeur qui n'est pas explicitement définie, ce qui rend la "margin: 0 auto ;" La propriété centre l'élément horizontalement dans son conteneur parent.
Si "display: inline" est défini :
L'élément n'aura pas de largeur au niveau du bloc et la "marge : 0 automatique ;" la propriété n'aura aucun effet.

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!