Wir sind auch auf viele JS-Kompatibilitätsprobleme gestoßen. Dieser Artikel enthält eine Zusammenfassung einiger Kompatibilitäts- und Fehlerprobleme in JS Ich hoffe, es kann allen helfen.
1. Attributbezogen
Wir bezeichnen Attribute und Eigenschaften normalerweise als Attribute, aber es handelt sich tatsächlich um unterschiedliche Konzepte.
Eigenschaften werden im HTML-Text angezeigt Die Änderung der Eigenschaften wird definitiv im äußeren HTML des Elements angezeigt, und die Eigenschaften sind nur im Elementknoten vorhanden. Das
-Attribut (Eigenschaft) dient zum Ändern des JS-Objekts, mit Ausnahme des integrierten Browsers Bei einigen Funktionen wirken sich andere Attributoperationen nicht auf den HTML-Text aus.
1. IE6/7 unterscheidet nicht zwischen Attributen und Merkmalen
Andere Browser unterscheiden nicht zwischen Attributen und Merkmalen, aber IE67 unterscheidet nicht zwischen ihnen. Unter IE67 können wir nur den Attributnamen verwenden Zum Löschen von Merkmalen sind diese beiden Namen zwar oft identisch, es gibt jedoch immer Unterschiede.
2. IE6/7 kann getAttribute/setAttribute nicht zum Bedienen von Funktionen verwenden, deren Wert keine Zeichenfolge ist.
In modernen Browsern gibt getAttribute definitiv die entsprechende Zeichenfolge in HTML zurück, während IE67 die Ergebnisse zurückgibt sind unvorhersehbar, daher müssen wir unter IE67 AttributeNode verwenden, um Attribute zu bedienen.
3. IE6/7/8 kann CSS-Text nicht über das Stilattribut abrufen.
Dieses Problem sollte darauf zurückzuführen sein, dass IE6/7 beim Abrufen des Stilattributs nicht zwischen Attributen und Merkmalen unterscheidet. Verwenden Sie einfach elem.style.cssText.
4. IE6/7 analysiert relative URLs in absolute URLs
Dieses Problem führt sogar dazu, dass das leere src-Attribut unter IE6/7 wiederholte Anfragen generiert ', 4).
5. Das Standardverhalten der Elementeigenschaften ist anders.
In einigen alten Webkit-Browsern ist der Standardwert von checkbox/radio beispielsweise „“ , während Nicht eingeschaltet. In einigen älteren Webkit-Browsern wird das erste Element der Auswahl nicht ausgewählt.
2. Stiloperationen
Normalerweise umfassen Stile das Abrufen und Festlegen von Inline-Stilen und das Abrufen der berechneten Stile von Elementen
1. IE unterstützt Hintergrundposition-x/y Andere Browser unterstützen
background-position-x/y nicht, um die Position eines Bildes bequem zu ändern. Wenn dies nicht unterstützt wird, können wir die Verwendung des Parsing-Attributs „background-position“ in Betracht ziehen, um damit umzugehen.
2. IE6/7 unterstützt das Opazitätsattribut nicht
Sie können den gleichen Effekt durch den Alpha-Filter erzielen, denken Sie jedoch daran, das Haslayout des Elements auszulösen.
3. IE6/7/8 lässt fälschlicherweise zu, dass die vom Klon generierten Knoten einige Attribute erben.
Wenn Sie beispielsweise ein oder zwei Attribute ändern, werden diese gleichzeitig geändert .
4. Verschiedene Möglichkeiten, den berechneten Stil zu erhalten
IE6/7/8 verwendet elem.currentStyle, während andere Browser die Funktion window.getComputedStyle verwenden.
5. Verschiedene Pixelierungsmethoden
Pixelisierung bezieht sich auf die Umwandlung von Abständen, deren Einheiten keine Pixel sind, in Pixel, um Berechnungen zu erleichtern. Streng genommen handelt es sich hierbei nicht um ein Kompatibilitätsproblem, es kann jedoch allgemein verwendet werden. In IE6/7/8 können wir elem.runtimeStyle mit pixelLeft zur Verarbeitung verwenden.
Moderne Browser können das width-Attribut verwenden.
6. Einige BUG-Verhaltensweisen beim Abrufen von CSS
In Webkti-Kernbrowsern geht Margin-Right oft schief.
3. Abfrageoperation
Die Abfrageübergabe bezieht sich auf das Finden einer Reihe von Elementen anhand einiger charakteristischer Zeichenfolgen oder auf die Beurteilung, ob die Elemente die Zeichenfolge erfüllen.
1. IE6/7 unterscheidet nicht zwischen ID und Name
Bei Verwendung von getElementById und getElementsByName unter IE6/7 werden Elemente mit derselben ID oder demselben Namen wie der angegebene Wert zurückgegeben zur gleichen Zeit. Da der Name normalerweise vom Backend vereinbart wird, sollten wir beim Schreiben von JS sicherstellen, dass die ID den Namen nicht dupliziert.
2. IE6/7 unterstützt getElementsByClassName und querySelectorAll nicht
Diese beiden Funktionen werden seit IE8 unterstützt, daher können wir unter IE6/7 eigentlich nur getElementByTagName verwenden.
3. IE6/7 unterstützt getElementsByTagName('*') nicht und gibt Nicht-Element-Knoten zurück
Verwenden Sie entweder kein * oder schreiben Sie eine Funktion, um es selbst zu filtern.
4. querySelectorAll unter IE8 ist nicht für Attributselektoren geeignet
Bei fast allen vordefinierten Browserattributen gibt es Probleme. Versuchen Sie, benutzerdefinierte Attribute zu verwenden oder keine Attributselektoren zu verwenden.
5. querySelectorAll unterstützt keine Pseudoklassen unter IE8
Manchmal sind Pseudoklassen sehr nützlich, aber IE8 unterstützt sie nicht: first, :last, :even, : odd, :eq, :nth, :lt, :gt sind keine Pseudoklassen und wir sollten sie zu keinem Zeitpunkt verwenden.
6. Die Match-Funktion von IE9 kann nicht mit Elementen umgehen, die sich nicht im DOM-Baum befinden.
Solange sich das Element nicht im DOM-Baum befindet, wird es definitiv false zurückgeben Es ist nicht möglich, das Element in den Körper zu werfen und es nach dem Abgleich zu löschen. Natürlich können wir auch unsere eigene Matching-Funktion schreiben, um einen Reflow zu vermeiden.
4. Ereignisoperationen
Wenn jeder nach der Kompatibilität von JS fragt, ist die erste Reaktion normalerweise attachmentEvent und addEventListener, aber es gibt immer noch viele Details über den Unterschied zwischen diesen beiden Funktionen.
1. Die Ereignisobjekte sind unterschiedlich
addEventListener ist das aktuelle Objekt, zu dem das Ereignis sprudelt, während attachmentEvent ein Fenster ist.
. Die Ereignisparameterobjekte sind unterschiedlich.
Beachten Sie unbedingt, dass die an attachmentEvent gebundene Funktion den Parameter e hat. Schreiben Sie nicht e = e || Von beiden gibt es viele Unterschiede, z. B. Schaltfläche oder Hexe, ob pageY unterstützt wird oder nicht usw.
2. Der Vorfall mit dem bösen Roller
Die Unterstützung für Radereignisse ist ein Durcheinander und die Regeln lauten wie folgt:
IE6-11 Chrome Mousewheel WheelDetla Down-120 Up 120
Firefox DOMMouseScroll Detail Down 3 Up-3
Firefox Wheel DetlaY Next 3 Up-3
IE9-11 Wheel Delta Down 40 Up-40
Chrome Wheel Delta Down 100 Up-100
3 Wichtige, nicht sprudelnde Ereignisse
Die Fokus-/Unschärfe-Ereignisse aller Browser sprudeln nicht. Glücklicherweise unterstützen die meisten Browser Focusin-/Focusout-Ereignisse, aber der verdammte Firefox unterstützt dies nicht einmal.
Das Submit-Ereignis wird unter IE678 nicht angezeigt.
Unter IE678 wird das Änderungsereignis erst ausgelöst, wenn es verschwimmt.
Wir haben keine wirksamen Mittel, um diese drei Probleme zu lösen, wir können sie nur durch Simulationsauslösung lösen.
4. a.click()
Diese Methode ist in vielen Browsern unsicher. Auch wenn das Standardverhalten blockiert ist, springt die Seite trotzdem.
5. Knotenoperationen
Knotenoperationen beziehen sich normalerweise auf das Kopieren, Generieren eines Knotens oder das Verschieben der Position eines Knotens.
1.. innerHTML
Wenn IE6/7/8 innerHTML verwendet, muss ein Textknoten davor stehen, sonst gehen viele Tags verloren. Darüber hinaus führt die Verwendung von innerHTML in vielen Fällen zu Fehlern im Attribut defaultValue.
2. Unbrauchbarer Tbody
IE6/7/8 fügt automatisch einen leeren Tbody zu einer leeren Tabelle hinzu
3 Das attachmentEvent-Ereignis wird beim Klonen von Node kopiert
Und wenn wir die Ereignisse, die wir binden, nicht aufzeichnen, haben wir keine Möglichkeit, sie zu lösen.
Verwandte Empfehlungen:
Häufige Browserkompatibilitätsprobleme in HTML und CSS
Detaillierte Analyse der Kompatibilitätsleistung in JavaScript
Detaillierte Erläuterung der JavaScript-String-Operationsmethoden und Browserkompatibilitätsbeispiele
Das obige ist der detaillierte Inhalt vonZusammenfassung einiger Kompatibilitäts- und fehleranfälliger Probleme in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
