Gründliche Kenntnisse des CSS-Haslayouts

Um CSS besser zu verstehen, insbesondere das Rendern von CSS unter IE, ist Haslayout ein Konzept, das gründlich verstanden werden muss. Die meisten Anzeigefehler im IE werden durch Haslayout verursacht.

Was ist Haslayout?
Haslayout ist eine interne Komponente der Windows Internet Explorer-Rendering-Engine. Im Internet Explorer berechnet ein Element entweder die Größe und organisiert seinen eigenen Inhalt oder verlässt sich auf ein übergeordnetes Element, um die Größe zu berechnen und den Inhalt zu organisieren. Um diese beiden unterschiedlichen Konzepte in Einklang zu bringen, verwendet die Rendering-Engine das hasLayout-Attribut, das wahr oder falsch sein kann. Wenn der hasLayout-Attributwert eines Elements wahr ist, sagen wir, dass das Element ein Layout hat.
Wenn ein Element ein Layout hat, ist es für die Größenberechnung und Positionierung seiner selbst und möglicher Nachkommenelemente verantwortlich. Einfach ausgedrückt bedeutet dies, dass das Element mehr Zeit damit verbringen muss, sich selbst und seinen Inhalt zu pflegen, anstatt sich für diese Arbeit auf Vorgängerelemente zu verlassen. Daher verfügen einige Elemente standardmäßig über ein Layout. Wenn wir sagen, dass ein Element „Layout hat“ oder „Layout erhält“ oder dass ein Element „Layout hat“, meinen wir, dass seine Microsoft-spezifische Eigenschaft hasLayout auf true gesetzt ist. Ein „Layout-Element“ kann ein Element sein, das standardmäßig über ein Layout verfügt, oder ein Element, das durch Festlegen bestimmter CSS-Eigenschaften über ein Layout verfügt. Wenn ein HTML-Element über das Attribut „haslayout“ verfügt, darf der Wert von „haslayout“ nur „true“ sein. Sobald es ausgelöst wird, ist es irreversibel. Sie können über die IE Developer Toolbar überprüfen, ob HTML-Elemente unter IE haslayout haben. Unter der IE Developer Toolbar werden Elemente mit haslayout normalerweise als „haslayout = -1“ angezeigt.
　Elemente, die für die Organisation ihrer eigenen Inhalte verantwortlich sind, haben standardmäßig ein Layout, das hauptsächlich die folgenden Elemente enthält (keine vollständige Liste):
　 * body und html
　 * table, tr, th, td
* img
* hr
* Eingabe, Schaltfläche, Datei, Auswahl, Textbereich, Feldsatz
* Laufschrift
* Frameset, Frame, Iframe
* Objekte, Applets, Einbettung
Für nicht Alle Elemente verfügen standardmäßig über ein Layout, und Microsoft nennt als Hauptgrund „Leistung und Einfachheit“. Wenn alle Elemente standardmäßig angeordnet wären, hätte dies negative Auswirkungen auf die Leistung und die Speichernutzung.
Wie aktiviere ich Haslayout?
Die meisten IE-Anzeigefehler können durch die Aktivierung des haslayout-Attributs des Elements korrigiert werden. Sie können das Haslayout des Elements aktivieren, indem Sie das CSS-Größenattribut (Breite/Höhe) usw. festlegen, sodass es „Layout“ hat. Legen Sie einfach die folgenden CSS-Eigenschaften wie unten gezeigt fest.
* display: inline-block
* height: (beliebiger Wert außer auto)
* float: (links oder rechts)
* position: absolut
* width: (beliebiger Wert außer auto )
　* Schreibmodus: tb-rl
　* Zoom: (beliebiger Wert außer normal)
　Internet Explorer 7 verfügt über einige zusätzliche Eigenschaften (keine vollständige Liste):
* min-height: (beliebiger Wert)
* max-height: (beliebiger Wert außer keinem)
* min-width: (beliebiger Wert)
* max-width: (beliebiger Wert außer none)
* overflow: (beliebiger Wert außer sichtbar)
* overflow-x: (beliebiger Wert außer sichtbar)
* overflow-y : (beliebiger Wert außer sichtbar)
* Position: fest
Wobei overflow-x und overflow-y Attribute im CSS3-Boxmodell sind, die von Browsern noch nicht allgemein unterstützt werden.
　Für das Inline-Element (Standard ist ein Inline-Element wie span oder ein Element mit display:inline;),
　width und height sind nur unter IE5.x und IE6 verfügbar oder neueres HasLayout wird im Quirks-Modus der Version ausgelöst. Wenn der Browser für IE6 im Standardkompatibilitätsmodus ausgeführt wird, ignorieren Inline-Elemente die Breiten- oder Höhenattribute, daher kann das Festlegen von Breite oder Höhe in diesem Fall nicht anordnen, dass das Element ein Layout hat.
Zoom kann immer hasLayout auslösen, wird aber in IE5.0 nicht unterstützt.
Wenn ein Element mit „layout“ gleichzeitig Folgendes anzeigt: inline, verhält es sich sehr ähnlich wie der im Standard erwähnte Inline-Block: Es wird wie gewöhnlicher Text horizontal und fortlaufend im Absatz angeordnet, vorbehaltlich vertikal-align wirkt sich aus und die Größe kann je nach Inhalt adaptiv angepasst werden. Dies kann auch erklären, warum Inline-Elemente in IE/Win allein mit weniger Problemen Elemente auf Blockebene enthalten können, da display: inline in anderen Browsern Inline bedeutet, im Gegensatz zu IE/Win, sobald das Inline-Element ein Layout hat, hat es es immer noch ein Layout. Wird zum Inline-Block.
Debuggen und Lösen von Layoutproblemen
Wenn sich eine Webseite im IE ungewöhnlich verhält, können Sie versuchen, haslayout zu aktivieren, um zu sehen, ob das Problem vorliegt. Eine gängige Methode besteht darin, zoom:1 auf das CSS eines Elements zu setzen. Zoom:1 wird verwendet, da es in den meisten Fällen das Haslayout des Elements auslöst, ohne die vorhandene Umgebung zu beeinträchtigen. Sobald das Problem verschwindet, kann grundsätzlich festgestellt werden, dass es die Ursache für das Haslayout ist. Anschließend können Sie dieses Problem beheben, indem Sie die entsprechenden CSS-Eigenschaften festlegen. Es wird empfohlen, zunächst die Breiten-/Höhenattribute des Elements festzulegen und dann andere Attribute zu berücksichtigen.
Für IE6 und frühere Versionen heißt die übliche Methode Holly-Hack, bei der die Höhe dieses Elements auf 1 % festgelegt wird (height:1 %;). Es ist zu beachten, dass diese Methode nicht funktioniert, wenn die Überlaufeigenschaft dieses Elements auf „sichtbar“ gesetzt ist. Oder verwenden Sie die bedingten Kommentare des IE.
Für IE7 besteht die beste Methode darin, die Mindesthöhe des Elements auf 0 (min-height:0;) festzulegen.
Häufige Fehler, die durch Haslayout-Probleme verursacht werden
Double-Margin-Floating-Fehler in IE6 und niedrigeren Versionen
Fehlerbehebung: display:inline
3-Pixel-Offset-Fehler in IE5-6/win
Fehlerbehebung: _height:1%;
E6s Peek-a-Boo-Fehler
Fehlerbehebung: _height:1%;

Das obige ist der detaillierte Inhalt vonGründliche Kenntnisse des CSS-Haslayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!