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:
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:
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 |
|