Warum zentriert „margin: 0 auto;' Elemente im IE8-Standardmodus nicht und wie kann ich das Problem beheben?-CSS-Tutorial-php.cn

Warum zentriert „margin: 0 auto;' Elemente im IE8-Standardmodus nicht und wie kann ich das Problem beheben?

Linda Hamilton

Freigeben： 2024-11-26 05:29:09

Original

770 Leute haben es durchsucht

Why Doesn't

HTML-Dokumenttypdeklaration und das Verhalten von „margin: 0 auto;“ in Internet Explorer 8

Wenn Sie Ihre Website in Internet Explorer 8 testen, kann es zu einem Problem kommen, bei dem „margin: 0 auto;“ angezeigt wird. Die Eigenschaft zentriert Ihre Elemente nicht wie erwartet. Dies wird insbesondere im Fall des folgenden HTML-Codes deutlich:

<div>

Nach dem Login kopieren

Während dieser Code die Schaltfläche in den meisten Browsern korrekt zentriert, einschließlich Firefox 3, Opera, Safari, Chrome, IE7 und IE8-Kompatibilitätsmodus, Im IE8-Standardmodus ist dies nicht möglich.

Um dieses Verhalten zu verstehen, ist es wichtig, die Rolle von HTML-Dokumenttypdeklarationen zu verstehen. Durch Hinzufügen einer Dokumenttypdeklaration wie:

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

Nach dem Login kopieren

am Anfang Ihres Dokuments kann das Problem behoben und die Schaltfläche im IE8-Standardmodus korrekt zentriert werden. Dies liegt daran, dass die Dokumenttypdeklaration die verwendete HTML-Version angibt und es dem Browser ermöglicht, den Code gemäß den richtigen Standards zu interpretieren.

Wenn es um das Verhalten von „margin: 0 auto;“ geht Im Allgemeinen handhaben Browser dies je nach der „display“-Eigenschaft des Elements unterschiedlich. Hier ist eine Aufschlüsselung:

Wenn „display: block“ festgelegt ist:
Das Element hat eine Breite, die nicht explizit definiert ist, wodurch „margin: 0“ automatisch eingestellt wird ;" -Eigenschaft zentriert das Element horizontal innerhalb seines übergeordneten Containers.
Wenn „display: inline“ festgelegt ist:
Das Element hat keine Breite auf Blockebene und der „Rand: 0 automatisch;" Eigenschaft hat keine Auswirkung.

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