Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments d'entrée en mode standard IE8 ?-tutoriel CSS-php.cn

Pourquoi \'margin: 0 auto;\' ne centre-t-il pas les éléments d'entrée en mode standard IE8 ?

DDD

Libérer： 2024-11-29 16:46:10

original

549 Les gens l'ont consulté

Why Doesn't

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>

Copier après la connexion

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

Copier après la connexion

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!