Utilisation de "margin : 0 auto ;" dans Internet Explorer 8

Question

Utilisation de "margin : 0 auto ;" dans Internet Explorer 8

Demandé el 19 de Mars, 2009: Quand la question a-t-elle été
122829 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de faire des tests avancés sur IE8, et il semble que l'ancienne technique d'utilisation de la fonction margin: 0 auto; ne fonctionne pas dans tous les cas dans IE8.

Le morceau de HTML suivant donne un bouton centré dans FF3, Opera, Safari, Chrome, IE7, et IE8 compat, mais PAS dans la norme IE8 :

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(Comme solution de rechange, je peux ajouter une largeur explicite au bouton).

La question est donc la suivante : quels sont les navigateurs corrects ? Ou s'agit-il d'un de ces cas où le comportement est indéfini ?

(Je pense que todo les navigateurs sont incorrects - le bouton ne devrait-il pas avoir une largeur de 100 % s'il est "display : block" ?)

MISE À JOUR : Je suis un cancre. Puisque input n'est pas un élément de niveau bloc, j'aurais dû le contenir dans un div avec "text-align : center". Cela dit, par curiosité, j'aimerais quand même savoir si le bouton doit être centré ou non dans l'exemple ci-dessus.

POUR LE PRIX : Je sais que je fais des choses bizarres dans l'exemple, et comme je le souligne dans la mise à jour, j'aurais dû simplement l'aligner au centre. Pour la prime, je voudrais des références aux spécifications qui répondent :

Si je définis "display : block", le bouton doit-il être le bouton doit-il avoir une largeur de 100 % ? Ou est-ce indéfini ?
Puisque l'affichage est en bloc, est-ce que "margin : 0 auto ;" centrer le bouton, ou bien pas, ou indéfini ?

Demandé el 19 de Mars, 2009 par stusmith

0 votes

Vous feriez mieux de vous dépêcher : IE8 RTM est aujourd'hui et sera disponible au téléchargement dans environ 2 heures.

Commenté el 19 de Mars, 2009 par Joel Coehoorn

0 votes

Il est encore en version bêta et l'absence de prise en charge complète d'IE8 n'est qu'une des nombreuses choses à corriger avant la sortie de la version.

Commenté el 19 de Mars, 2009 par stusmith

Answer 1

5 Réponses

Answer 2

156voto

Pal Points 1431

Ajout de <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> résout le problème

Répondu el 5 de Octobre, 2010 par Pal (1431 Points )

13 votes

Sans le DOCTYPE, IE passe automatiquement en mode de rendu Quirks. Utile :-)

Commenté el 21 de Juin, 2011 par Andy McCluggage

7 votes

Échec également si vous avez quelque chose avant doctype, (c'est-à-dire des commentaires, une balise html de départ, etc...).

Commenté el 6 de Juin, 2012 par Shanimal

0 votes

Aussi avec bootstrap a cassé tous

Commenté el 4 de Août, 2014 par Userpassword

Answer 3

71voto

buti-oxa Points 6428

C'est un bug dans IE8.

Commençons par votre deuxième question : "margin : 0 auto" centre un bloc, mais uniquement lorsque la largeur du bloc est inférieure à celle du parent. En général, elles sont identiques. C'est pourquoi le texte de l'exemple ci-dessous n'est pas centré.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Une fois que le style d'affichage de l'élément b est défini sur block, sa largeur correspond par défaut à celle des parents. Spécification CSS 10.3.3 Éléments non remplacés au niveau du bloc dans un flux normal décrit comment : "Si 'width' est défini sur 'auto', toute autre valeur 'auto' devient '0' et 'width' découle de l'égalité qui en résulte." L'égalité mentionnée ici est

margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largeur du bloc qui le contient

Donc, normalement, tous les autos ont pour résultat que la largeur du bloc est égale à la largeur du bloc contenant.

Toutefois, ce calcul ne doit pas être appliqué à INPUT, qui est un élément remplacé. Les éléments remplacés sont couverts par 10.3.4 Éléments remplacés au niveau du bloc, en flux normal . Le texte dit : "La valeur utilisée de 'width' est déterminée comme pour les éléments remplacés en ligne." La partie pertinente de 10.3.2 Éléments remplacés en ligne est : "si 'width' a une valeur calculée de 'auto', et que l'élément a une largeur intrinsèque, alors cette largeur intrinsèque est la valeur utilisée de 'width'".

Je suppose que le scénario dont CSS se soucie est l'élément IMG. Le logo de Stackoverflow dans cet exemple sera centré par tous les navigateurs.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

L'élément INPUT doit se comporter de la même manière.

Répondu el 2 de Mai, 2009 par buti-oxa (6428 Points )

Answer 4

5voto

Wolfr Points 2797

Oui, vous pouvez lire la spécification cent fois, et combiner différents morceaux jusqu'à ce que vous ayez une interprétation qui vous semble correcte - mais c'est exactement ce que les vendeurs de navigateurs ont fait et c'est pourquoi nous sommes dans la situation actuelle.

En substance, lorsque vous appliquez une largeur de 100 % à un élément, celui-ci doit s'étendre à 100 % de la largeur de son parent, si ce dernier est un élément de bloc. Vous ne pouvez plus le centrer avec margin: 0 auto; alors qu'il occupe déjà 100% de la largeur disponible.

Pour centrer quoi que ce soit avec margin: 0 auto; vous devez définir une largeur explicite. Pour centrer un élément en ligne, vous pouvez utiliser text-align: center; sur l'élément parent, bien que cela puisse avoir des effets secondaires indésirables si le parent a d'autres enfants.

Répondu el 3 de Mai, 2009 par Wolfr (2797 Points )

Answer 5

5voto

porneL Points 42805

Les contrôles de formulaires sont éléments remplacés en CSS.

10.3.4 Éléments remplacés au niveau du bloc, en flux normal

L'utilisation La valeur de "width" est déterminée comme pour les éléments remplacés en ligne. . Ensuite, les règles relatives aux éléments de niveau bloc non remplacés sont appliquées pour déterminer les marges.

Ainsi, le contrôle de formulaire ne devrait pas être étiré à 100% de sa largeur.

Cependant, il devrait être centré. Cela ressemble à un bogue ordinaire dans IE8. Il centre l'élément si vous définissez une largeur spécifique :

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />

Répondu el 4 de Mai, 2009 par porneL (42805 Points )

Answer 6

3voto

Simon Dyson Points 389

Comme expliqué par buti-oxa, il s'agit d'un bogue dans la façon dont IE8 traite les éléments remplacés. Si vous ne voulez pas ajouter une largeur explicite à votre bouton, vous pouvez le transformer en bloc inline et aligner son contenu au centre :

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

Si vous voulez que cela fonctionne dans les anciennes versions de Mozilla (y compris FF2) qui ne supportent pas les blocs en ligne, vous pouvez ajouter display: -moz-inline-stack; au bouton.

Répondu el 8 de Juin, 2009 par Simon Dyson (389 Points )

Utilisation de "margin : 0 auto ;" dans Internet Explorer 8

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Utilisation de "margin : 0 auto ;" dans Internet Explorer 8

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: