Heim >Web-Frontend >CSS-Tutorial >Warum zentriert „margin: 0 auto;' Eingabeelemente im IE8-Standardmodus nicht?
Warum zentriert „margin: 0 auto;' Eingabeelemente im IE8-Standardmodus nicht?
- DDDOriginal
- 2024-11-29 16:46:10449Durchsuche
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>
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">
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!