Tabelle der durch hasLayout verursachten CSS-Fehler

Tabelle der durch hasLayout verursachten CSS-Fehler
Der IE hat schon seit längerem Probleme. Als alle getestet wurden, lächelten alle, aber der IE grinste nur...

Leider gibt es keine Möglichkeit, da der Inlandsmarkt voll von solchen grinsenden Browsern ist ... ( Achten Sie auf die Todesgeschwindigkeit von IE678 )

Nachdem ich alles nacheinander geprüft, gelesen, auszugsweise wiedergegeben, aufgezeichnet, geübt und zusammengefasst hatte, erlangte ich schließlich ein grundlegendes Verständnis für die Ursache seiner schlechten Angewohnheit.

hatLayout !

Zunächst die Definition:

Es handelt sich um eine einzigartige Eigenschaft des Internet Explorers. Es bestimmt, ob ein Element entweder die Größe berechnet und seinen eigenen Inhalt organisiert oder sich bei der Berechnung und Organisation des Inhalts auf das übergeordnete Element verlässt. Um diese beiden Konzepte zu unterscheiden, verwendet die Rendering-Engine das Attribut hasLayout, true oder false. Wenn das Attribut true ist, sagen wir, dass dieses Element das Layout auslöst.

Tags mit dem Attribut „hasLayout“ :

<html>, <body>, <table>, <tr>, <td>, <td>, <img>, <hr>, <input>, <button>, <select>, <textarea>, <fieldset>, <legend>, <iframe>, <embed>, <object>, <applet>, <marquee>

Welche Bedeutung hat dieses Attribut?

Wenn das Layout eines Elementobjekts aktiviert ist, werden die Positionierung und Größenberechnung von diesem und seinen untergeordneten Elementen unabhängig voneinander durchgeführt, d. h. es handelt sich um ein unabhängiges Layout. Daher verursacht der Browser beim Verarbeiten von Elementen mit Layout höhere Kosten. Um die Leistung zu verbessern, hat sich der Internet Explorer diese private Eigenschaft ausgedacht.

CSS-Funktionen, die hasLayout auslösen können:


Code kopieren
Der Code lautet wie folgt:

Anzeige: Inline-Block
Höhe: (jeder Wert außer Auto)
Breite: (jeder Wert außer Auto)
schweben: (links || rechts)
Position: absolut
Schreibmodus: tb-rl
Zoom: (jeder Wert außer normal)

IE7 kann die CSS-Funktion hasLayout auslösen:


Code kopieren
Der Code lautet wie folgt:

Mindesthöhe: (beliebiger Wert)
Mindestbreite: (beliebiger Wert)
max. Höhe: (jeder Wert außer keiner)
maximale Breite: (jeder Wert außer keiner)
Überlauf: (jeder Wert außer sichtbar, nur für Elemente auf Blockebene)
overflow-x: (jeder Wert außer sichtbar, nur für Elemente auf Blockebene)
overflow-y: (jeder Wert außer sichtbar, nur für Elemente auf Blockebene)
Position:fest

Werfen wir einen Blick auf die klinischen Erscheinungsformen von schiefem Mund und schiefen Augen : (Die folgenden Inhalte wurden alle von mir selbst getestet)

Frage Browser DEMO Lösung
1 Eingabe[Schaltfläche | Senden] nicht zentriert IE8 Fehler | behoben Breite hinzufügen
2 body{overflow:hidden;} entfernt die Bildlaufleiste nicht IE6/7 Fehler | behoben Wechseln zu html{overflow:hidden;}
3 Das Tag mit hasLayout hat Höhe IE6/7 Fehler | behoben Add_overflow:hidden;*height:0
4 Wenn das Element form>[hasLayout] einen linken Rand hat, hat [input | textarea] im untergeordneten Element 2×margin-left IE6/7 Fehler | behoben Formular > [hasLayout-Element] {Margin-left: Breite;}
Form div{*margin-left:width÷2;}
5 Wenn ein untergeordnetes Element die Position „relative“ hat, ist das Festlegen von „overflow:[hidden|auto]“ für das übergeordnete Element gleichbedeutend mit dem Festlegen von „position:visible“ für das untergeordnete Element. IE6/7 Fehler | behoben Position festlegen: relativ zum übergeordneten Element;
6 Chaotisches Schweben in der Liste: Beim Schweben von Bildern in der Liste laufen die Bilder über die normale Position hinaus; oder es gibt keinen Listenstil IE8 Fehler | behoben Listenstil durch Hintergrundbild ersetzen
7 th erbt nicht automatisch die Textausrichtung des übergeordneten Elements IE8 Fehler | behoben Fügen Sie text-align:inherit zu th hinzu;
8 Die maximale Anzahl an Stilen (einschließlich link/style/@import(link)) ist: 32 IE6-8 ─ Gesunder Menschenverstand In 99,99 % der Fälle werden Sie nicht
9 Die Farbe im PNG-Bild und die Hintergrundfarbe haben den gleichen Wert, werden aber unterschiedlich angezeigt IE6-7 Fehler | behoben Verwenden Sie pngcrush, um Gammaprofile aus Bildern zu entfernen
10 margin:0 auto; Blockelement kann nicht horizontal zentriert werden IE6-8 Fehler | behoben Fügen Sie dem Blockelement eine Breite hinzu
11 Verwenden Sie die Pseudoklasse :first-line | :first-letter, und das Vorhandensein von !important im Attributwert macht das Attribut ungültig. IE8 Fehler | behoben !important ist böse, benutze es nicht mehr
12 :first-letter ist nicht mehr gültig IE6 Fehler | behoben Verschieben Sie :first-letter an die Stelle, die {} am nächsten ist, z. B. h1, p:first-letter{}, statt p:first-letter h1{}
13 In einem Position:absolute-Element, einem Display:Block, ist nur der Text anklickbar, wenn er sich nicht im :hover-Modus befindet. IE6/7 Fehler | behoben Fügen Sie a einen Hintergrund hinzu. Wenn der Hintergrund transparent ist, verwenden Sie background:url('zwischengespeicherter Dateilink auf einer beliebigen Seite'). Background:url(#)[offizielle Lösung] wird nicht empfohlen, da es zu mehr HTTP-Anfragen führt.
14 dt, dd, li Hintergrund deaktiviert IE6 Fehler | behoben dt, dd, li{position:relative;}
15 Die Stile des Elements <noscript /> werden angezeigt, wenn JavaScript aktiviert ist IE6-8 Fehler | behoben Verwenden Sie js, um display:none zu <noscript /> hinzuzufügen;
16 Die Elemente in li weichen von der Grundlinie ab und ziehen nach unten IE8/9 Fehler | behoben Setzen Sie display:inline oder float:[direction] für li
17 Der Listenstil von li wird in der Liste nicht angezeigt IE6/7 Fehler | behoben Fügen Sie margin-left zu li hinzu, um Platz für die Anzeige zu lassen (fügen Sie es nicht zu ul hinzu)
18 Das Bild kann nicht vertikal zentriert werden IE6/7 Fehler/behoben Fügen Sie ein leeres Tag hinzu und weisen Sie es „Layout“ zu, z. B. display:inline-block;
19 Zeigerstil kann nicht angepasst werden IE6-8 Fehler | behoben Legen Sie den absoluten Pfad zur Zeigerdatei fest
20 Die Höhe überschreitet die durch Höhe definierte Höhe IE6 Fehler/behoben Fügen Sie _overflow:hidden; (empfohlen) oder _font-size:0; hinzu.
einundzwanzig Die Breite überschreitet die durch width definierte Breite IE6 Fehler/behoben add_overflow:versteckt;
zweiundzwanzig Doppelte Ränder IE6 ─ Gesunder Menschenverstand Fügen Sie dem Float-Element display:inline hinzu
dreiundzwanzig Negativer Randwert verbirgt: Nicht-hasLayout-Elemente innerhalb des übergeordneten Elements von hasLayout. Wenn ein negativer Rand verwendet wird, ist der Teil hinter dem übergeordneten Element unsichtbar. IE6/7 Fehler/behoben Entfernen Sie hasLayout vom übergeordneten Element, oder weisen Sie hasLayout dem untergeordneten Element zu und fügen Sie position:relative hinzu.
vierundzwanzig Setzen Sie den Text eines der beiden schwebenden Elemente auf kursiv, und das andere Element wird unter das Element mit kursivem Text gesetzt IE6 Fehler/behoben Fügen Sie dem Element mit kursivem Text overflow:hidden hinzu.
25 3px Abstand: Elemente nach dem Float-Element haben einen Abstand von 3px IE6 Fehler/behoben Da es genau 3px sind, verwenden Sie also "rohe Gewalt", wie z. B. _margin-left: -3px; oder setzen Sie float
26 Textausrichtung wirkt sich auf Elemente auf Blockebene aus IE6/7 Fehler/behoben Ordnen Sie Ihre Floats an oder legen Sie die Textausrichtung separat fest

<<:  So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML

>>:  Detaillierter Prozess der SpringBoot-Integration von Docker

Artikel empfehlen

Vue-Konfigurationsdetails für mehrere Seiten

Inhaltsverzeichnis 1. Der Unterschied zwischen me...

Semantische Webseiten XHTML semantische Auszeichnung

Ein weiterer wichtiger Aspekt bei der Trennung vo...

Detaillierte Erläuterung der CSS-Randüberlappung und Lösungssuche

Ich habe kürzlich einige CSS-bezogene Wissenspunk...

So ändern Sie die Kodierung der MySQL-Datenbank in utf8mb4

Die utf8mb4-Kodierung ist eine Obermenge der utf8...

So konvertieren Sie MySQL-Bin-Log-Protokolldateien in SQL-Dateien

mysqlbinlog-Version anzeigen mysqlbinlog -V [--ve...

Mit Mailto ist das Senden von E-Mails im HTML-Format ganz einfach

Kürzlich habe ich dem Footer-Postfach des Kunden e...

Implementierungscode für die HTML-Drag & Drop-Funktion

Basierend auf Vue Die Kernidee dieser Funktion be...