Es gibt viele ausgezeichnete Artikel im Ausland, aus denen man lernen kann, deshalb habe ich beschlossen, etwas Zeit damit zu verbringen, sie zu übersetzen. Ich weiß nicht, ob jemand diesen Artikel übersetzt hat. Der ursprüngliche Name ist 10 Awful IE Bugs and Fixes . Ich hoffe, dass mehr Leute diese hervorragenden Artikel lesen können. Ausländer sind sehr humorvoll, deshalb habe ich den gesamten Text gelesen. Experten machen einen Umweg
Das Folgende ist die Übersetzung :
Ich habe 10 häufige IE-Fehler und ihre Lösungen aufgelistet. Ich bin davon überzeugt, dass Ihnen dies dabei helfen wird, den Zeitaufwand für das Debuggen von Layout-Inkonsistenzen im IE zu reduzieren.
Autor: Kevin
Einführung
Jeder hat seine eigene Geschichte, wenn es um den Umgang mit IE geht. Als Entwickler muss ich mich mit vielen Macken des IE auseinandersetzen und manchmal möchte man einfach nur mit dem Kopf gegen die Wand schlagen. Aber im Laufe der Zeit haben wir viel gelernt (manchmal war es nicht unsere Schuld, sondern die Schuld des IE!) und begannen, das seltsame Verhalten des IE zu akzeptieren und zu verstehen. Wir müssen dies tun, da es immer noch eine beträchtliche Anzahl von IE6-Benutzern gibt. Am besten testen Sie Ihre Website von Anfang an ständig mit verschiedenen Browsern. Es ist viel einfacher, Layoutprobleme von Anfang an zu lösen, als erst nach Tausenden von Zeilen HTML- und CSS-Code.
Es gibt eine Menge Protestbewegungen gegen IE6, die von der Mehrheit der Webexperten und normalen Benutzern unterstützt werden, denen das scheinbar egal ist. Was können wir also jetzt tun? Wir mussten weiter suchen, um das Problem mit IE6 zu lösen. Aber warten Sie, es gibt aufregende Neuigkeiten. Laut dem monatlichen Bericht von w3cschool ist die Zahl der IE6-Benutzer im Laufe der Jahre zurückgegangen. Von 60,3 % im Juni 2006 auf 13,6 % im September 2009. Nach diesem Verhältnis sollten wir in der Lage sein, IE6 bis Ende 2010 aufzugeben (Anmerkung: Die Situation im Ausland ist wirklich gut~.~)
Okay, zurück zur Realität: Ich habe eine Liste aller Probleme erstellt, auf die ich zuvor gestoßen bin, damit ich später darauf zurückgreifen kann. Ich bin davon überzeugt, dass Ihnen dies dabei helfen wird, den Zeitaufwand für das Debuggen von Layout-Inkonsistenzen im IE zu reduzieren.
1. IE6-Ghost-Text (Ghost-Text-Bug)
Bevor ich diesen Artikel schrieb, bin ich auf diesen Fehler gestoßen. Es ist ziemlich seltsam und lustig. Ein doppelter Text, der aus dem Nichts kommt, wird von IE6 nahe am Originaltext angezeigt. (Anmerkung: Eine Fehlerdemonstration finden Sie auch im Explorer 6 Duplicate Characters Bug .) Ich konnte es nicht beheben, also habe ich danach gesucht und tatsächlich ist es ein weiterer IE6-Fehler.
Es gibt viele Problemumgehungen dafür, aber keine davon hat in meinem Beispiel funktioniert (einige davon konnte ich aufgrund der Komplexität der Website nicht verwenden). Also habe ich einen Hack verwendet. Das Einfügen von Leerzeichen nach dem Originaltext scheint das Problem zu lösen.
Allerdings habe ich im Hippy Tech Blog erfahren, dass der Grund für das Problem in HTML-Kommentar-Tags liegt. IE6 kann es nicht korrekt rendern. Hier ist eine Liste seiner Lösungsvorschläge:
Lösung :
2. Position relativ und Überlauf ausgeblendet
Ich bin oft auf dieses Problem gestoßen, als ich ein Tutorial zu JQuery vorbereitet habe, weil ich viele versteckte Überläufe verwendet habe, um das gewünschte Layout zu erreichen.
Das Problem tritt auf, wenn der Überlauf des übergeordneten Elements auf „versteckt“ und das untergeordnete Element auf „position:relative“ festgelegt ist.
CSS-Trick hat ein tolles Beispiel, das diesen Fehler demonstriert. position:relative und Überlauf im Internet Explorer
Lösung :
Fügen Sie position:relative; zum übergeordneten Element hinzu.
3. Min. Höhe für IE
Es ist ganz einfach: Der IE ignoriert das Min-Height-Attribut. Sie können den Hack unten verwenden, um das Problem zu beheben. Danke an Dustin Diaz .
Diese Lösung funktioniert gut in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2.
Lösung :
Selektor {
Mindesthöhe: 500 Pixel;
height:auto !important;
Höhe:500px;
}