Maison >interface Web >tutoriel CSS >Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments d'entrée en mode standard IE8 ?
Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments d'entrée en mode standard IE8 ?
- DDDoriginal
- 2024-11-29 16:46:10449parcourir
IE8 Écart avec "marge : 0 auto ;" pour l'élément d'entrée
Malgré son utilisation généralisée pour le centrage des éléments, la « marge : 0 auto ; » la propriété semble présenter un comportement incohérent dans IE8. Dans un récent 测试, un élément d'entrée enfermé dans un élément de bloc n'a pas réussi à se centrer dans le mode standard d'IE8.
Le code HTML en question est le suivant :
<div>
Navigateur Compatibilité
Le problème de centrage incorrect des éléments en mode standard IE8 a été observé dans de nombreux navigateurs, dont :
- Firefox 3
- Opera
- Safari
- Chrome
- Mode de compatibilité IE7
Cependant, il n'est pas présent dans la norme IE8 mode.
Problème sous-jacent
Le coupable derrière ce comportement est le fait que les éléments d'entrée ne sont pas intrinsèquement des éléments de niveau bloc. Lorsque "display: block" est appliqué à une entrée, il la transforme effectivement en un élément de niveau bloc, rendant la "margin: 0 auto;" propriété applicable.
Solution
Pour résoudre ce problème, les développeurs peuvent soit définir explicitement une largeur pour l'élément d'entrée, soit le contenir dans un élément de niveau bloc et appliquer " text-align: center" au conteneur.
Références de spécification
Selon le CSS Spécification 2.1 :
- "display: block" sur un élément non-bloc ne spécifie pas de largeur explicite.
- "margin: 0 auto;" sur un élément de niveau bloc le centre horizontalement au sein de son élément parent.
Par conséquent, le comportement des navigateurs qui ne centrent pas l'élément d'entrée avec "margin: 0 auto;" est incorrect selon les spécifications.
Remarque : L'ajout d'une déclaration DOCTYPE peut résoudre le problème dans certains cas. Pensez à utiliser ce qui suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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!