Warum zentriert „margin: 0 auto;' Eingabeelemente im IE8-Standardmodus nicht?-CSS-Tutorial-php.cn

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

DDD

Freigeben： 2024-11-29 16:46:10

Original

500 Leute haben es durchsucht

Why Doesn't

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>

Nach dem Login kopieren

Browser Kompatibilität

Das Problem der falschen Elementzentrierung im IE8-Standardmodus wurde in zahlreichen Browsern beobachtet. einschließlich:

Firefox 3
Opera
Safari
Chrome
IE7-Kompatibilitätsmodus

Allerdings ist es im IE8-Standard nicht vorhanden Modus.

Grundlegendes Problem

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.

Lösung

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.

Spezifikationsreferenzen

Gemäß die CSS 2.1-Spezifikation:

"display: block" für ein Nicht-Block-Level-Element gibt keine explizite Breite an.
"margin: 0 auto;" auf einem Blockebenenelement zentriert es horizontal innerhalb seines übergeordneten Elements.

Daher ist das Verhalten von Browsern, die das Eingabeelement nicht mit „margin: 0 auto;“ zentrieren ist gemäß den Spezifikationen falsch.

Hinweis: Das Hinzufügen einer DOCTYPE-Deklaration kann das Problem in einigen Fällen lösen. Erwägen Sie die Verwendung von Folgendem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum zentriert „margin: 0 auto;' Eingabeelemente im IE8-Standardmodus nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!