Maison >interface Web >tutoriel CSS >Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments en mode standard IE8 et comment puis-je y remédier ?
Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments en mode standard IE8 et comment puis-je y remédier ?
- Linda Hamiltonoriginal
- 2024-11-26 05:29:09793parcourir
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>
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">
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!