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

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>
<p><strong>Navigateur Compatibilité</strong></p>
<p>Le problème de centrage incorrect des éléments en mode standard IE8 a été observé dans de nombreux navigateurs, dont :</p>
<ul>
<li>Firefox 3</li>
<li>Opera</li>
<li>Safari</li>
<li>Chrome</li>
<li>Mode de compatibilité IE7</li>
</ul>
<p>Cependant, il n'est pas présent dans la norme IE8 mode.</p>
<p><strong>Problème sous-jacent</strong></p>
<p>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.</p>
<p><strong>Solution</strong></p>
<p>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.</p>
<p><strong>Références de spécification</strong></p>
<p>Selon le CSS Spécification 2.1 :</p>
<ul>
<li>"display: block" sur un élément non-bloc ne spécifie pas de largeur explicite.</li>
<li>"margin: 0 auto;" sur un élément de niveau bloc le centre horizontalement au sein de son élément parent.</li>
</ul>
<p>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.</p>
<p><strong>Remarque :</strong> L'ajout d'une déclaration DOCTYPE peut résoudre le problème dans certains cas. Pensez à utiliser ce qui suit :</p>
<pre class="brush:php;toolbar:false">