Warum zentriert „margin: 0 auto;' Eingabeelemente im IE8-Standardmodus nicht?

IE8 Diskrepanz mit „margin: 0 auto;“ für Eingabeelement

Trotz seiner weit verbreiteten Verwendung zur Elementzentrierung ist „margin: 0 auto;“ Die Eigenschaft scheint in IE8 ein inkonsistentes Verhalten zu zeigen. In einer aktuellen Meldung konnte sich ein in einem Blockelement eingeschlossenes Eingabeelement nicht im Standardmodus von IE8 zentrieren.

Der betreffende HTML-Code lautet wie folgt:

<div>
<p><strong>Browser Kompatibilität</strong></p>
<p>Das Problem der falschen Elementzentrierung im IE8-Standardmodus wurde in zahlreichen Browsern beobachtet. einschließlich:</p>
<ul>
<li>Firefox 3</li>
<li>Opera</li>
<li>Safari</li>
<li>Chrome</li>
<li>IE7-Kompatibilitätsmodus</li>
</ul>
<p>Allerdings ist es im IE8-Standard nicht vorhanden Modus.</p>
<p><strong>Grundlegendes Problem</strong></p>
<p>Der Grund für dieses Verhalten ist die Tatsache, dass Eingabeelemente nicht von Natur aus Elemente auf Blockebene sind. Wenn „display: block“ auf eine Eingabe angewendet wird, wird diese effektiv in ein Element auf Blockebene umgewandelt, sodass „margin: 0 auto;“ Eigenschaft anwendbar.</p>
<p><strong>Lösung</strong></p>
<p>Um dieses Problem zu beheben, können Entwickler entweder explizit eine Breite für das Eingabeelement festlegen oder es in einem Element auf Blockebene enthalten und „ text-align: center" zum Container.</p>
<p><strong>Spezifikationsreferenzen</strong></p>
<p>Gemäß die CSS 2.1-Spezifikation:</p>
<ul>
<li>"display: block" für ein Nicht-Block-Level-Element gibt keine explizite Breite an.</li>
<li>"margin: 0 auto;" auf einem Blockebenenelement zentriert es horizontal innerhalb seines übergeordneten Elements.</li>
</ul>
<p>Daher ist das Verhalten von Browsern, die das Eingabeelement nicht mit „margin: 0 auto;“ zentrieren ist gemäß den Spezifikationen falsch.</p>
<p><strong>Hinweis:</strong> Das Hinzufügen einer DOCTYPE-Deklaration kann das Problem in einigen Fällen lösen. Erwägen Sie die Verwendung von Folgendem:</p>
<pre class="brush:php;toolbar:false">