1. document.formName.item("itemName") Problembeschreibung: Unter IE können Sie document.formName.item("itemName") oder document.formName.elements ["elementName"] verwenden; unter Firefox können Sie nur verwenden Dokument .formName.elements["elementName"].
Lösung: document.formName.elements["elementName"] einheitlich verwenden.
2. Sammlungsobjektproblem Beschreibung: Unter IE können Sie () oder [] verwenden, um Sammlungsobjekte abzurufen. Unter Firefox können Sie nur [] verwenden, um Sammlungsobjekte abzurufen.
Lösung: Verwenden Sie [] einheitlich, um Sammlungsobjekte zu erhalten.
3. Problem mit benutzerdefinierten Attributen Beschreibung: Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, um benutzerdefinierte Attribute abzurufen, oder Sie können getAttribute () verwenden, um benutzerdefinierte Attribute abzurufen. Unter Firefox können Sie nur getAttribute () verwenden, um benutzerdefinierte Attribute abzurufen .
Lösung: Erhalten Sie benutzerdefinierte Attribute einheitlich über getAttribute().
4. eval("idName") Problembeschreibung: Unter IE können Sie eval("idName") oder getElementById("idName") verwenden, um das HTML-Objekt mit der ID idName abzurufen; unter Firefox können Sie nur getElementById(" verwenden idName"), um das HTML-Objekt mit der ID idName zu erhalten.
Lösung: Verwenden Sie getElementById("idName") einheitlich, um das HTML-Objekt mit der ID idName abzurufen.
5. Das Problem, dass der Variablenname mit der ID eines HTML-Objekts übereinstimmt: Unter IE kann die ID des HTML-Objekts direkt als Variablenname des untergeordneten Objekts des Dokuments verwendet werden, jedoch nicht unter Firefox; unter Firefox kann die Variable mit derselben ID wie das HTML-Objekt verwendet werden, jedoch nicht unter IE.
Problemumgehung: Verwenden Sie document.getElementById("idName") anstelle von document.idName. Es ist am besten, Variablennamen nicht mit derselben HTML-Objekt-ID zu verwenden, um Fehler beim Deklarieren von Variablen zu vermeiden. Fügen Sie immer das Schlüsselwort var hinzu, um Mehrdeutigkeiten zu vermeiden.
6. Const-Problembeschreibung: Unter Firefox können Sie das Schlüsselwort const oder das Schlüsselwort var zum Definieren von Konstanten verwenden. Unter IE können Sie zum Definieren von Konstanten nur das Schlüsselwort var verwenden.
Lösung: Verwenden Sie das Schlüsselwort var einheitlich, um Konstanten zu definieren.
7. Input.type-Attributproblem Problembeschreibung: Das input.type-Attribut unter IE ist schreibgeschützt, aber das input.type-Attribut unter Firefox ist schreibgeschützt.
Lösung: Ändern Sie das Attribut input.type nicht. Wenn Sie es ändern müssen, können Sie zunächst die ursprüngliche Eingabe ausblenden und dann an derselben Position ein neues Eingabeelement einfügen.
8. Window.event-Problem Beschreibung des Problems: window.event kann nur unter IE ausgeführt werden, nicht jedoch unter Firefox. Dies liegt daran, dass das Firefox-Ereignis nur an der Stelle verwendet werden kann, an der das Ereignis auftritt.
Lösung: Fügen Sie den Ereignisparameter zu der Funktion hinzu, in der das Ereignis auftritt, und verwenden Sie var myEvent = evt?evt:(window.event?window.event:null) im Funktionskörper (vorausgesetzt, der formale Parameter ist evt).
Beispiel:
Programmcode
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
Funktion doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
</script>
9. Event.x und event.y Problembeschreibung: Unter IE hat das gerade Objekt die Attribute x und y, aber nicht die Attribute pageX und pageY. Unter Firefox hat das gerade Objekt die Attribute pageX und pageY, aber keine x- und y-Attribute.
Lösung: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.pageY;
Wenn Sie Frage 8 berücksichtigen, verwenden Sie einfach myEvent anstelle von event.
10. Event.srcElement-Problem Problembeschreibung: Unter IE hat das gerade Objekt das srcElement-Attribut, aber nicht das Zielattribut; unter Firefox hat das gerade Objekt das Zielattribut, aber nicht das srcElement-Attribut.
Lösung: Verwenden Sie srcObj = event.srcElement ? event.srcElement : event.target;
Wenn Sie Frage 8 berücksichtigen, verwenden Sie einfach myEvent anstelle von event.
11. Window.location.href-Problem Problembeschreibung: Unter IE oder Firefox2.0.x können Sie window.location oder window.location.href verwenden, unter Firefox1.5.x können Sie nur window.location verwenden.
Problemumgehung: Verwenden Sie window.location anstelle von window.location.href. Natürlich können Sie auch die Methode location.replace() verwenden.
12. Probleme mit modalen und nichtmodalen Fenstern Problembeschreibung: Unter IE können modale und nichtmodale Fenster über showModalDialog und showModelessDialog geöffnet werden, unter Firefox ist dies nicht möglich.
Lösung: Verwenden Sie direkt die Methode window.open(pageURL,name,parameters), um ein neues Fenster zu öffnen.
Wenn Sie Parameter im untergeordneten Fenster zurück an das übergeordnete Fenster übergeben müssen, können Sie window.opener im untergeordneten Fenster verwenden, um auf das übergeordnete Fenster zuzugreifen. Wenn Sie das übergeordnete Fenster zur Steuerung des untergeordneten Fensters benötigen, verwenden Sie var subWindow = window.open(pageURL,name,parameters); um das neu geöffnete Fensterobjekt abzurufen.
13. Für die Frage von Frame und i-Frame wird der folgende Frame als Beispiel verwendet:
<frame src=" http://www.abc.com/123.html " id="frameId" name="frameName" />
(1) Greifen Sie auf das Rahmenobjekt zu. IE: Verwenden Sie window.frameId oder window.frameName, um auf das Rahmenobjekt zuzugreifen.
Firefox: Verwenden Sie window.frameName, um auf dieses Frame-Objekt zuzugreifen.
Lösung: Verwenden Sie window.document.getElementById("frameId") einheitlich, um auf dieses Rahmenobjekt zuzugreifen.
(2) Um den Frame-Inhalt zu wechseln, können Sie window.document.getElementById("frameId").src = "index.html" oder window.frameName.location = "index.html" verwenden, um den Frame-Inhalt in beiden IE zu wechseln und Firefox;
Wenn Sie Parameter im Frame zurück an das übergeordnete Fenster übergeben müssen, können Sie das Schlüsselwort parent im Frame verwenden, um auf das übergeordnete Fenster zuzugreifen.
14. Problem beim Laden des Bodys Problembeschreibung: Das Body-Objekt von Firefox ist vorhanden, bevor das Body-Tag vollständig vom Browser gelesen wurde, während das Body-Objekt von IE vorhanden sein muss, nachdem das Body-Tag vollständig vom Browser gelesen wurde.
[Hinweis] Dieses Problem wurde nicht tatsächlich überprüft und wird nach der Überprüfung geändert.
[Hinweis] Es wurde bestätigt, dass das obige Problem in IE6, Opera9 und FireFox2 nicht auftritt. Ein einfaches JS-Skript kann auf alle Objekte und Elemente zugreifen, die vor dem Skript geladen wurden, auch wenn das Element noch nicht geladen wurde.
15. Erklärung des Problems der Ereignisdelegierung: Verwenden Sie unter IE document.body.onload = inject; wobei die Funktion inject() bereits unter Firefox implementiert wurde, verwenden Sie document.body.onload = inject();
Lösung: Verwenden Sie document.body.onload=new Function('inject()'); oder document.body.onload = function(){/* Hier ist der Code */}
[Hinweis] Der Unterschied zwischen Funktion und Funktion
16. Der Unterschied zwischen den übergeordneten Elementen, auf die zugegriffen wird. Fragebeschreibung: Verwenden Sie unter IE obj.parentElement oder obj.parentNode, um auf den übergeordneten Knoten von obj zuzugreifen. Verwenden Sie unter Firefox obj.parentNode, um auf das übergeordnete Element von obj zuzugreifen Knoten. Elternknoten.
Lösung: Da sowohl Firefox als auch IE DOM unterstützen, wird obj.parentNode verwendet, um auf den übergeordneten Knoten von obj zuzugreifen.
17. Cursor:Hand VS Cursor:Zeiger
Beschreibung des Problems: Firefox unterstützt keine Hand, aber IE unterstützt Zeiger. Beide sind Handanweisungen.
Lösung: Zeiger einheitlich verwenden.
18. Probleme mit innerText.
Problembeschreibung: innerText funktioniert normal im IE, aber innerText funktioniert nicht in Firefox.
Lösung: Verwenden Sie textContent anstelle von innerText in Nicht-IE-Browsern.
Beispiel:
Programmcode
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "mein Text";
} anders{
document.getElementById('element').textContent = "mein Text";
}
[Hinweis] innerHTML wird gleichzeitig von Browsern wie IE und Firefox unterstützt. Andere, wie äußereHTML, werden nur vom IE unterstützt und sollten am besten nicht verwendet werden.
19. Problem bei der Zuweisung von Objektbreite und -höhe Problembeschreibung: Anweisungen ähnlich wie obj.style.height = imgObj.height in Firefox sind ungültig.
Lösung: Verwenden Sie einheitlich obj.style.height = imgObj.height + 'px'.
20. Tabellenoperationsproblem Problembeschreibung: IE, Firefox und andere Browser haben unterschiedliche Operationen für das Tabellen-Tag, was im IE für die innerHTML-Zuweisung nicht zulässig ist Von Tabelle und TR funktioniert die Verwendung der appendChild-Methode nicht, wenn js zum Hinzufügen eines TR verwendet wird.
Lösung:
Programmcode
//Eine leere Zeile an die Tabelle anhängen:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[Hinweis] Da ich JS selten zum direkten Betreiben von Tabellen verwende, bin ich noch nie auf dieses Problem gestoßen. Es wird empfohlen, zum Betrieb von Tabellen ein JS-Framework wie JQuery zu verwenden.
21. Einrückungsproblem von ul- und ol-Listen Wenn die Einrückung von ul-, ol- und anderen Listen beseitigt wird, sollte der Stil wie folgt geschrieben werden: list-style:none;margin:0px;padding:0px;
Das Margin-Attribut ist für IE gültig und das Padding-Attribut ist für FireFox gültig. ← Dieser Satz ist falsch ausgedrückt, Einzelheiten finden Sie unter ↓
[Hinweis] Dieses Problem wurde nicht tatsächlich überprüft und wird nach der Überprüfung geändert.
[Hinweis] Es wurde bestätigt, dass die Einstellung „margin:0px“ die oberen, unteren, linken und rechten Einzüge, Leerzeichen und Listennummern oder Punkte der Liste in Firefox nicht beeinflussen kann. Durch die Einstellung „margin:0px“ können nur die oberen und unteren Einzüge entfernt werden. Nach dem Festlegen von „padding:0px“ können Sie nur die linken und rechten Einzüge entfernen. Sie müssen auch „list-style:none“ festlegen, um Listennummern oder Punkte zu entfernen. Mit anderen Worten: Im IE kann nur margin:0px festgelegt werden, um den endgültigen Effekt zu erzielen, während in Firefox margin:0px, padding:0px und list-style:none gleichzeitig festgelegt werden müssen, um den endgültigen Effekt zu erzielen.
22. CSS-Transparenzproblem IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: Deckkraft: 0,6.
[Hinweis] Es ist am besten, beides zu schreiben und das Deckkraftattribut unten anzugeben.
23. CSS-Problem mit abgerundeten Ecken IE: Versionen unter IE7 unterstützen keine abgerundeten Ecken.
FF: -moz-border-radius:4px, oder -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- Radius-bottomright:4px;.
[Hinweis] Das Problem mit abgerundeten Ecken ist ein klassisches Problem in CSS. Es wird empfohlen, das JQuery-Frame-Set zum Festlegen abgerundeter Ecken zu verwenden und diese komplexen Probleme anderen zu überlassen.
Es gibt zu viele Probleme mit CSS, und selbst die gleiche CSS-Definition hat in verschiedenen Seitenstandards unterschiedliche Anzeigeeffekte. Ein Vorschlag, der mit der Entwicklung übereinstimmt, ist, dass die Seite unter Verwendung von Standard-DHTML-Standards geschrieben werden sollte, mit weniger Verwendung von Tabellen. CSS-Definitionen sollten so weit wie möglich auf dem Standard-DOM basieren und gängige Browser wie IE und Firefox berücksichtigen , und Oper. Übrigens sind die CSS-Interpretationsstandards von FF und Opera in vielen Fällen näher an den CSS-Standards und normativer.