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 mit einigen außergewöhnlichen "Naturen" ist. Fassen wir es als Referenz zusammen:
IE6 Standardmodus:◎ Unabhängig davon, welche Höhe und Breite für sie festgelegt sind, deckt die Größe immer den gesamten Betrachtungsbereich ab.
◎ 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 außergewöhnliches 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 y -Richtung einfach und ähnelt dem Verständnis der gewöhnlichen Elementhöhe durch IE6 - 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 automatisch eine eigene Höhe, um die eigene Höhe 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: Breite von <html> Wenn es sich um einen anderen Wert als einen anderen Wert als einen Wert, der nicht 0 ist (einschließlich des Standardwerts automatisch), 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, deckt die Breite den Inhaltsraum von <html> ab.
3. Wenn <body> selbst schrumpfende und umgebende Eigenschaften aufweist, z. B. die Position der Position: Absolut oder Anzeige: Inline (das seltsame Ding ist float, erfüllt aber nicht dieses Element, es 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 anpassen, aber es gibt eine erstaunliche Phänomene. Der Inhaltsraum von <html> ist mit <html> bedeckt. Da die Breite von <html> zu diesem Zeitpunkt 0 beträgt, kollabiert auch die Breite von <body> auf 0.
Zweitens beeinflussen die Breite und Höheneinstellungen von <html> überraschend die prozentuale Referenz von <body> (oder <body> enthaltendem Block).
In der y -Richtung wird die Höhe von <html>, wenn die Höhe von <html> ist, wenn die Höhe von <body> einen prozentualen Wert nimmt, ignoriert wird. 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 gerade festgelegten <html> ist, sondern die Summe der Randgrenze -Polsterhöhen der Höhe der Ansichtsfläche abzüglich der <html>.
In x -Richtung wird die prozentuale Breite von <body> nicht ignoriert, wenn die Breite das Standardwert automatisch einnimmt und die y -Richtung unterschiedlich ist, aber seine Berechnung referenz ist immer noch so seltsam wie die y -Richtung, wobei die Summe der Randgrenze -Polsterbreite von <html> für die Ansichtsportbreite subtrahiert. 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 erstaunlicher 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. IE7 AH IE7 ... Ich möchte sagen, ich liebe dich sehr ...
IE5 und Quirksmodi◎ <html> und <body> Alle Breiten- und Höheneinstellungen werden ignoriert und bleiben voller Betrachtungsbereiche.
◎ <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.