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

Maison

interface Web

tutoriel CSS

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

DDD

Nov 29, 2024 pm 04:46 PM

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn