Das <html> Element, das Stammelement im XHTML -Dokument, ist sehr vertraut. Ich habe jedoch in letzter Zeit versucht, ein Layout zu machen und stellte fest, dass es in IE keine so einfache Rolle ist und einige ganz besondere Eigenschaften hat. Fassen wir es als Referenz zusammen:
IE6 Standardmodus:◎ Unabhängig davon, welche Höhe und Breite für sie festgelegt sind, füllt die Größe immer den gesamten Betrachtungsbereich.
◎ Unabhängig davon, welche Art von Polsterung und Rand für ihn festgelegt sind, füllen Sie die Größe und Größe immer den gesamten Betrachtungsbereich.
◎ Der Rand wird ignoriert.
◎ Initiale enthalten Block ist die randbreite Breite des Ansichtsbereichs Rechteck minus <html>
Mit CSS3, um es auszudrücken, können wir <html> in IE6 als spezielles Höhenelement betrachten: 100%; Breite: 100%; Kastengrößen: Border-Box; und diese Attribute sind unveränderlich.
IE7 Standardmodus:Obwohl IE7 in IE6 mehrere CSS -Fehler behoben hat, ist das Verständnis von <html> viel komplizierter als IE6. Obwohl IE6 komisch ist, gibt es nur wenige Attribute, die geändert werden können, so dass es immer noch einfach ist. IE7s <html> kann mehr Attribute akzeptieren, aber der Algorithmus folgt nicht den Spezifikationen und ist ehrlich, daher ist es viel problematischer, es herauszufinden als IE6.
Das erste ist die automatische Expansionsfunktion.
Das <html> -Element ist in der y -Richtung einfacher, ähnlich wie IE6s Verständnis der normalen Elementhöhe - wenn die Inhaltshöhe die Höhe von <html> überschreitet oder wenn die <html> keine feste Höhe hat (d. H. Der Standardwertauto), erweitern Sie die eigene Höhe automatisch seine eigene Höhe, um die Inhalte zu enthalten.
Aber in X -Richtung konzentriert sich das Problem hauptsächlich auf das Verständnis der Breite von <body>. Hier sind zwei Situationen: (Hat es nicht <html> gesagt? Warum haben Sie über die Breite von <body> gesprochen? Denn wenn <html> automatisch expandiert werden möchte, müssen Sie wissen, wie weit der <body> erweitert wird.)
Der erste Fall: Wenn die Breite von <html> alle anderen Werte als Nicht-0-Werte (einschließlich des Standardwerts automatisch) sind, wird die Breite von <body> durch die folgenden Regeln bestimmt:
1. Wenn die Breite von <body> ein fester Wert ist, gibt es so viel Breite.
2. Wenn die Breite von <body> das Standardwert ist, füllt die Breite den Inhaltsraum von <html>.
3. Wenn <body> selbst schrumpfende und umgebende Eigenschaften aufweist, z. B. die Position der Position: Absolut oder Anzeige: Inline (seltsamerweise erfüllt Float dieses Element nicht, er erfüllt 2), dann hängt es von der Breite des Inhalts ab.
Der zweite Fall: Wenn die Breite von <html> 0 beträgt, dann sind die 1. und 3. Punkte oben wie oben und der 2. Punkt, wenn die Breite von <body> das Standardwert ist, wird sich die Breite an den Inhalt anpasst, aber es ist ein seltsames Phenomen, wenn der Body> zuerst einen seltsamen Phenomen ist, wenn der Border. Das Abdicht wird nicht. Es wird nicht der Fall, und es wird nicht. Das 2n. Fall - Ein Inhaltsraum voller <html>. Da die Breite von <html> zu diesem Zeitpunkt 0 beträgt, kollabiert auch die Breite von <body> auf 0.
Zweitens wirken sich die Breite und Höheneinstellungen von <html> seltsamerweise die prozentuale Referenz von <body> (oder den enthaltenden Block von <body>) aus.
In der y -Richtung wird die Höhe von <html> das Standardwert für automatisch ist, dann wird die Höhe von <body> ignoriert, wenn es einen prozentualen Wert benötigt. Sobald der Höhenwert von <html> eine bestimmte Höhe hat, wird die prozentuale Höhe von <body> angewendet, selbst wenn er 0 ist. Aber seltsam ist, dass die Berechnungsreferenz für diese prozentuale Höhe nicht die Höhe des nur festgelegten <html> ist, sondern die Summe der Rand+Grenze+Polsterhöhen der Höhe des Betrachtungsbereichs minus <html>.
In x -Richtung wird die Breite des Standardwerts automatisch einnimmt und die prozentuale Breite von <body> nicht ignoriert, aber seine Berechnung referenz ist immer noch so seltsam wie die y -Richtung, wodurch die Summe der Rand-+Rand+-Padding -Breiten von <html> für die Ansichtsfenster -Breite subtrahiert wird. Wenn die Breite einen bestimmten Wert hat, wird sie als prozentuale Breite für <body> ersetzt.
Wenn <body> auf Position eingestellt ist: Absolut, ist die Grenzfarbe von <html> ungültig. Dies ist ein weiterer seltsamer Fehler.
Schließlich verwendet der anfängliche Block mit einem Ansichtsfenster -Rechteck, das im Grunde genommen normal ist. Es ist jedoch unmöglich, einen Block mit absolut positionierten Elementen zu erstellen. Aber vielleicht ist der von <html> erstellte Block das Ansichtsfenster -Rechteck, der weiß.
Es ist so chaotisch. Es ist nicht nur ein großer Kopf, sondern auch ein großer Kopf, nachdem er ihn aussortiert hat. Ich weiß nicht, ob Sie es klar sehen können, nachdem Sie in Zukunft zurückgezogen sind. Dh7 ah ie7 ... es ist nicht leicht zu sagen, dass du dich liebst ...
IE5 und Quirksmodi◎ <html> und <body> Alle Breiten- und Höheneinstellungen werden ignoriert und bleiben voller Ansichtsfenster.
◎ <html> Polsterung und Marge werden nicht akzeptiert.
◎ <Body> Akzeptieren Sie Polsterung und Rand, aber der negative Rand hat keinen visuellen Effekt, wird jedoch bei der Berechnung anderer entsprechender Parameter eingesetzt.
Rand, Hintergrund und andere Attribute von ◎ <body> werden nach oben auf das <html> -Element übertragen.
◎ Der initiale Block ist die Polsterkante von <body>.
NützlichkeitDiese Zusammenfassung wird am Anfang aus dem Layoutproblem abgeleitet. Das Layoutproblem ist eines ihrer Verwendungen. Ich werde einen Beitrag umschreiben, um es später zu klären. Dieses Layout verwendet jedoch nur wenige Funktionen, und es sollte mehr Potenzial zum Tippen geben. Untersuchen Sie es also langsam.