Zusammenfassung der JavaScript- und CSS-Kompatibilität von Front-End-Browsern
1. getElementById
[Standardreferenz]
getElementById ist Die von der Document-Schnittstelle bereitgestellte Methode wird zum Abrufen eines Elements verwendet. Der von dieser Methode übergebene Parameter sollte der Wert des id-Attributs des Zielelements sein. Die ID des Zielelements ist eine Zeichenfolge, bei der die Groß- und Kleinschreibung beachtet wird sollte innerhalb des Dokuments eindeutig sein.
[Problembeschreibung]
Aber in IE6 IE7 IE8(Q) wird es unterstützt, eine APPLET BUTTON FORM IFRAME IMG INPUT zu erhalten, deren Namensattributwert elementName von document.getElementById(elementName) ist. MAP META OBJECT EMBED SELECT TEXTAREA-Element, und bei der ID wird die Groß-/Kleinschreibung nicht beachtet.
【Auswirkungen】
Dieses Problem führt dazu, dass das Zielelement in Nicht-IE-Browsern nicht abgerufen werden kann.
[Lösung]
Bei Verwendung der document.getElementById-Methode zum Abrufen von Seitenelementen sollte der ID-Attributwert des Elements anstelle des Namensattributwerts des Elements übergeben werden Dabei wird strikt auf Groß- und Kleinschreibung geachtet. Bitte beachten Sie gleichzeitig, dass der ID-Attributwert eines Elements auf der Seite nicht mit dem Namensattributwert anderer Elemente wiederholt werden kann.
Außerdem unterscheidet der standardmäßige getElementsByName wie getElementById die Groß-/Kleinschreibung, unter IE ist er jedoch nicht von der Groß-/Kleinschreibung abhängig. Daher ist es am besten, bei der Verwendung strikt auf die Groß-/Kleinschreibung zu achten.
2. IE ignoriert bestimmte Leerzeichen beim Erstellen eines DOM-Baums
[Standardreferenz]
Knoten (Knoten) umfasst nicht nur Elementknoten, sondern auch Textknoten, Anmerkungen Knoten, Attributknoten usw., der Typ der Knoten kann mithilfe von nodeType unterschieden werden.
Im HTML-Quellcode wird Text innerhalb und zwischen Tags (einschließlich Leerzeichen) als Textknoten erstellt.
[Problembeschreibung]
Beim Erstellen des DOM-Baums ignoriert IE einige Leerzeichen, sodass weniger Textknoten erstellt werden als bei anderen Browsern. Andererseits erstellen andere Browser für dasselbe Dokument mehr Textknoten als der IE.
【Auswirkungen】
Skripte, die von Benutzern für IE entwickelt wurden und die Methoden nodeList, firstChild, lastChild, previousSibling oder nextSibling des Knotenobjekts verwenden, funktionieren aufgrund dieses Problems möglicherweise nicht in anderen Browsern denselben Zweck erreichen, beispielsweise ein Skriptausführungsfehler oder eine Operation am falschen Zielobjekt.
[Lösung]
1. Versuchen Sie, die Leerzeichen zwischen den Tags zu entfernen, wenn sie nicht erforderlich sind.
Da Seitenskripte meist auf „Elementknoten“ arbeiten, müssen Sie nur sicherstellen, dass zwischen den Elementen keine Textknoten vorhanden sind (d. h. es gibt keine Leerzeichen zwischen den Tags im Quellcode – einschließlich Leerzeichen und Zeilen). Pausen, Tab), um dafür zu sorgen, dass sich die oben genannten Eigenschaften in allen Browsern konsistent verhalten.
Darüber hinaus sind Elemente, die mithilfe von Skripten erstellt und nacheinander hinzugefügt werden, eng miteinander verbunden. Es gibt keine Textknoten zwischen Elementen, sodass in diesem Fall kein Grund zur Sorge über die oben genannten Kompatibilitätsprobleme besteht, wie zum Beispiel:
2. Treffen Sie beim Erwerb von Knoten eine Typbeurteilung.
Wenn es keine Garantie dafür gibt, dass zwischen Elementen keine Textknoten vorhanden sind, müssen Sie der Operation an den Knoten eine Typbeurteilung hinzufügen.
Darüber hinaus können Sie in Nicht-IE auch previousElementSibling und nextElementSibling verwenden, um den Elementknoten abzurufen. Beispiel: Verwenden Sie Element.nextElementSibling, um den nächsten Elementknoten neben dem Element Element abzurufen.
3. Unterschiede in den Onscroll-Ereignissen von document-, document.body- und document.documentElement-Objekten
[Standardreferenz]
Das Scroll-Ereignis wird ausgelöst, wenn das Dokument bzw ein Element wird gescrollt.
[Problembeschreibung]
Es gibt Unterschiede in der Unterstützung von Onscroll-Ereignissen von document-, document.body- und document.documentElement-Objekten zwischen verschiedenen Browsern
Alle Browser unterstützen Fenster und normal Das Scroll-Ereignis des DIV-Objekts;
In IE und Opera unterstützen die Objekte document und document.body das Scroll-Ereignis. Wird in anderen Browsern nicht unterstützt.
Im IE unterstützt das document.documentElement-Objekt das Scroll-Ereignis. Wird in anderen Browsern nicht unterstützt.
【Auswirkungen】
Nachdem das Onscroll-Ereignis an die Objekte document, document.body und document.documentElement gebunden wurde, wird der entsprechende Ereignishandler in verschiedenen Browsern möglicherweise nicht wie erwartet ausgelöst.
[Lösung]
Wenn Sie das Scroll-Ereignis (Scrollen) an das gesamte Browserfenster binden, binden Sie es an das Fensterobjekt.
4. Nur die createElement-Methode im IE unterstützt die Übergabe von HTML-String als Parameter
[Standardreferenz]
Gemäß der Beschreibung in der W3C DOM Level2 Core-Spezifikation unter Die Document-Schnittstelle Die Methode createElement erstellt eine Elementknotenobjektinstanz. Es kann ein Zeichenfolgenparameter tagName übergeben werden. In HTML kann dieser Parameter eine beliebige Form haben und muss einer kompatiblen Großbuchstabenform zugeordnet werden, die vom DOM implementiert werden kann. Das heißt, tagName sollte ein zulässiger Tag-Name sein. Wenn in tagName unzulässige Zeichen vorkommen, sollte eine INVALID_CHARACTER_ERR-Ausnahme ausgelöst werden.
[Problembeschreibung]
In IE6 IE7 IE8 kann die Methode createElement nicht nur Knotenobjekte über zulässige Tag-Namen erstellen, sondern sie auch durch Übergabe einer zulässigen HTML-Codezeichenfolge als Parameter erstellen Knotenobjekt.
【Auswirkung verursachen】
Wenn Sie die einzigartige Methode des IE zum Erstellen eines Knotenobjekts verwenden, indem Sie eine zulässige HTML-Codezeichenfolge als Parameter an createElement übergeben, wird in anderen Browsern eine Ausnahme ausgelöst und nachfolgender Code wird nicht ausgeführt.
[Lösung]
Verwenden Sie für allgemeine nicht ersetzbare Elemente die Standardmethode der Übergabe des Tag-Namens an die createElement-Methode in jedem Browser gemäß der W3C-Spezifikation.
Bei einigen IE-Verarbeitungsproblemen mit ersetzten Elementen achten Sie auf den Browser. Verwenden Sie für IE seine einzigartige Methode zur Übergabe einer zulässigen HTML-Codezeichenfolge als Parameter an createElement. Nicht-IE-Browser verwenden weiterhin die Standardmethode der W3C-Spezifikation, zum Beispiel:
Inkompatibler Code, nur von IE unterstützt:
Var iframe = document.createElement('
Nach der Änderung:
var iframe = (document.all) ? document.createElement('
iframe.name = "iframe";5. Die Attribute „outerHTML“, „innerText“ und „outerText“ des DOM-Objekts[Standardreferenz]outerHTML war ursprünglich Vom IE-Browser implementierte private Eigenschaft. Weitere Informationen finden Sie in der MSDN-Beschreibung: äußereHTML-Eigenschaft. Dieses Attribut wurde auch neu zum HTML5-Spezifikationsentwurf des W3C hinzugefügt, der das Element selbst und seinen Inhalt beschreibt. Wenn Sie diese Eigenschaft für ein DOM-Element mit einer Zeichenfolge festlegen, wird die Zeichenfolge als HTML-Code gerendert und ersetzt das DOM-Element. Derzeit unterstützt unter den Mainstream-Browsern nur Firefox das äußereHTML-Attribut nicht. [Problembeschreibung]Firefox unterstützt nicht die Attribute „outerHTML“, „innerText“ und „outerText“ von DOM-Objekten. [Auswirkungen]Verwenden Sie „outerHTML“, „innerText“. Die Eigenschaften „innerText“ und „outerText“ führen dazu, dass das Skript einen Fehler meldet. 【Lösung】Im Moment keine, bitte vermeiden Sie die Verwendung so oft wie möglich. 6. IE6 IE7 IE8 Opera unterstützt die „Klick“-Methode anderer Elemente außer INPUT- und BUTTON-Elementen [Standardreferenz]Die „Klick“-Methode wird verwendet für Simulation Ein Mausklickereignis kann auf INPUT-Elemente angewendet werden, deren „Typ“-Attributwerte „Schaltfläche“, „Kontrollkästchen“, „Radio“, „Zurücksetzen“ und „Senden“ sind. Die „Klick“-Methodenspezifikationen anderer Elemente werden nicht erwähnt. [Problembeschreibung]IE6 IE7 IE8 Opera unterstützt die „Klick“-Methode anderer Elemente außer INPUT- und BUTTON-Elementen, wodurch die Unterstützung für „Klick“ auf Elemente in jedem Browser unterschiedlich ist. 【Auswirkungen】Aufgrund der Unterschiede in der Browserunterstützung für die „Klick“-Methode anderer Elemente als INPUT- und BUTTON-Elemente führt dies dazu, dass durch Mausklicks ausgelöste Funktionen durch den „Klick“ simuliert werden. Die Methode anderer Elemente reagiert in einigen Browsern nicht. [Lösung]Es wird empfohlen, die Simulation von Mausklickereignissen durch die „Klick“-Methode bei anderen Elementen außer INPUT- und BUTTON-Elementen zu vermeiden. Wenn Sie die „click“-Methode für ihr Element verwenden müssen, um den „onClick“-Ereignishandler auszulösen, können Sie das Problem auf zwei Arten lösen: * Da in den meisten Fällen die Die Methode „Klick“ wird aufgerufen. Die Implementierung besteht lediglich darin, die an ein bestimmtes Element gebundene Ereignisbehandlungsfunktion auszuführen, sodass die dem Element entsprechende Ereignisbehandlungsfunktion „Klick“ direkt aufgerufen werden kann. * Oder verwenden Sie die Methoden „createEvent“, „initEvent“ und „dispatchEvent“ in den relevanten Definitionen der DocumentEvent-Schnittstelle, der Ereignisschnittstelle und der Ereignisregistrierungsschnittstellen im DOM-Level-2-Events-Standard, um die zu erstellen und zu versenden „Klick“-Ereignis. Zum Beispiel: function createEvent (eventTarget,eventName){try{if(eventTarget.dispatchEvent){var evt = document.createEvent ( "MouseEvents");evt.initEvent(eventName,false,true);eventTarget.dispatchEvent(evt);}else if(eventTarget.fireEvent) { eventTarget.fireEvent('on'+eventName);}else{eventTarget[ type ]();}}catch(e){alert(e);}}createEvent(HTMLElement,'click');8. Kompatibilitätszusammenfassung des CSS-HacksCSS-Hack bezieht sich auf die spezielle CSS-Definitionstechnik, die wir verwenden, um mit verschiedenen Browsern kompatibel zu sein. (Hinweis: Sie sollten versuchen, CSS-Hack nicht zu verwenden, es sei denn, Sie müssen es tun, da die Vorwärtskompatibilität unbekannt ist. Eine gute Möglichkeit besteht darin, das Webstandarddesign gut zu erlernen und das Kompatibilitätsdesign von Grund auf durchzuführen.) In der folgenden Tabelle I Kombiniert viele Informationen und Praxis mit Tabellen, die in HTML-Code geschrieben sind, was für die Erweiterung und Aktualisierung praktisch ist, aber schwierig im Dokument anzuzeigen ist, daher ist es in zwei Screenshots unterteilt: Zuerst nehmen wir Ein einfaches Beispiel zur Unterscheidung des IE-Browsers von anderen Browsern: color :red; (von allen Browsern unterstützt) color:red9 (unterstützt von IE) color:red