Unterschiede zwischen js im IE und Firefox_Grundkenntnisse

1.firefox kann innerText nicht unterstützen.
Firefox unterstützt innerHTML, aber nicht innerText. Es unterstützt textContent zur Implementierung von innerText, aber die zusätzlichen Leerzeichen werden standardmäßig ebenfalls beibehalten. Wenn textContent nicht verwendet wird, kann stattdessen innerHTML verwendet werden, wenn die Zeichenfolge keinen HTML-Code enthält.

2. Auswahl von Webinhalten verbieten:
Verwenden Sie im IE im Allgemeinen js: obj.onselectstart=function(){return false;}
Firefox verwendet CSS:-moz-user-select:none

3. Filterunterstützung (Beispiel: transparenter Filter):
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10;

4. Ereignis erfassen:
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

5. Mausposition abrufen:
IE: event.clientX, event.clientY
Firefox: Die Ereignisfunktion ist erforderlich, um das Ereignisobjekt
zu übergeben obj.onmousemove=function(ev){
X=ev.pageX;Y=ev.pageY;
}

6. Grenzprobleme von DIV und anderen Elementen:
Beispiel: Legen Sie das CSS eines div::{width:100px;height:100px;border:#000000 1px solid;}
fest Im IE: Div-Breite (einschließlich Randbreite): 100 Pixel, Div-Höhe (einschließlich Randbreite): 100 Pixel; Und Firefox: die Breite des Div (einschließlich der Randbreite): 102 Pixel, die Höhe des Div (einschließlich der Randbreite): 102 Pixel;
Wenn Sie also dieses Ziehfenster erstellen, das mit IE und Firefox kompatibel ist, müssen Sie beim Schreiben von JS und CSS Ihr Gehirn einsetzen. Hier sind zwei Tipps für Sie

1. Bestimmen Sie den Browsertyp:

var isIE=document.all? true:false;

Ich habe eine Variable geschrieben. Wenn die document.all-Syntax unterstützt wird, ist IE=true, andernfalls isIE=false

2. CSS-Verarbeitung unter verschiedenen Browsern:

Im Allgemeinen können Sie !important verwenden, um die Verwendung von CSS-Anweisungen zu priorisieren (wird nur von Firefox unterstützt)

Zum Beispiel: {border-width:0px!important;border-width:1px;}
Unter Firefox hat dieses Element keinen Rahmen. Unter IE beträgt die Rahmenbreite 1px

1.document.formName.item("itemName") Problem

Beschreibung des Problems: Unter IE können Sie document.formName.item("itemName") oder document.formName.elements ["elementName"] verwenden, unter Firefox können Sie nur document.formName.elements["elementName"] verwenden; .

Lösung: document.formName.elements["elementName"] einheitlich verwenden.

2. Problem mit dem Sammelobjekt

Beschreibung des Problems: 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 Sammlungsklassenobjekte zu erhalten.

3. Probleme mit benutzerdefinierten Attributen

Beschreibung des Problems: 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") Problem

Beschreibung des Problems: 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("idName") verwenden, um das zu erhalten HTML-Objekt mit der ID idName.

Lösung: Verwenden Sie getElementById("idName") einheitlich, um das HTML-Objekt zu erhalten, dessen ID idName ist.

5. Das Problem, dass der Variablenname mit einer HTML-Objekt-ID identisch ist

Beschreibung des Problems: Unter IE kann die ID des HTML-Objekts direkt als Variablenname des untergeordneten Objekts des Dokuments verwendet werden, nicht jedoch unter Firefox. Unter Firefox kann derselbe Variablenname wie die HTML-Objekt-ID verwendet werden. aber 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-Problem

Beschreibung des Problems: 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

Beschreibung des Problems: Das Attribut „input.type“ unter IE ist schreibgeschützt; das Attribut „input.type“ unter Firefox ist jedoch 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 Ereignis von Firefox 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:

Code kopieren Der Code lautet wie folgt:

9.Event.x- und event.y-Probleme Beschreibung des Problems: Unter IE hat das gerade Objekt die Attribute x und y, aber keine pageX- und pageY-Attribute. 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.y:event.pageY;
Wenn Sie Frage 8 berücksichtigen, verwenden Sie einfach myEvent anstelle von event.

10.event.srcElement-Problem

Beschreibung des Problems: Unter IE hat das gerade Objekt das srcElement-Attribut, aber nicht das Zielattribut; unter Firefox hat das gerade Objekt das Zielattribut, aber kein 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

Beschreibung des Problems: 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 Verwendung der Methode location.replace() in Betracht ziehen.

12. Modale und nichtmodale Fensterprobleme

Beschreibung des Problems: Unter IE können modale und nichtmodale Fenster über showModalDialog und showModelessDialog geöffnet werden, jedoch nicht unter Firefox.

Lösung: Verwenden Sie direkt 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.Frame- und Iframe-Probleme

Nehmen Sie als Beispiel den folgenden Rahmen:

(1)Zugriff auf das Frame-Objekt
IE: Verwenden Sie window.frameId oder window.frameName, um auf dieses Frame-Objekt
zuzugreifen Firefox: Verwenden Sie window.frameName, um auf dieses Frame-Objekt zuzugreifen Lösung: Verwenden Sie window.document.getElementById("frameId") einheitlich, um auf dieses Frame-Objekt
zuzugreifen
(2) Rahmeninhalt wechseln
Sowohl im IE als auch in Firefox können Sie window.document.getElementById("frameId").src = "xxx.html" oder window.frameName.location = "xxx.html" verwenden, um den Inhalt des Frames zu ändern; 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 Körpers

Beschreibung des Problems: Das Body-Objekt von Firefox ist vorhanden, bevor das Body-Tag vollständig vom Browser gelesen wurde. Das Body-Objekt von IE muss jedoch vorhanden sein, 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 nicht geladen wurde.

15. Ereignisdelegiertenmethode
Beschreibung des Problems: Verwenden Sie unter IE document.body.onload = inject; wobei die Funktion inject() bereits implementiert wurde. Unter Firefox 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. Unterschiede in den aufgerufenen übergeordneten Elementen
Beschreibung des Problems: Verwenden Sie unter IE obj.parentElement oder obj.parentNode, um auf den übergeordneten Knoten von obj zuzugreifen. Unter Firefox verwenden Sie obj.parentNode, um auf den übergeordneten Knoten von obj zuzugreifen.
Lösung: Da sowohl Firefox als auch IE DOM unterstützen, wird obj.parentNode einheitlich 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.InnerText-Problem

Problembeschreibung: innerText kann im IE normal funktionieren, innerText funktioniert jedoch nicht in Firefox.
Lösung: Verwenden Sie textContent anstelle von innerText in Nicht-IE-Browsern.
Beispiel:

Code kopieren

Der Code lautet wie folgt:

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "mein Text"; } else{
document.getElementById('element').textContent = "mein Text"; }

[Hinweis] innerHTML wird von Browsern wie IE und Firefox gleichzeitig 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 wie obj.style.height = imgObj.height sind in FireFox ungültig.

Lösung: Verwenden Sie obj.style.height = imgObj.height 'px';

20. Probleme beim Tischbetrieb

Problembeschreibung: IE, Firefox und andere Browser haben unterschiedliche Operationen für Tabellen-Tags. Im IE ist die innerHTML-Zuweisung von table und tr nicht zulässig. Wenn js zum Hinzufügen eines tr verwendet wird, funktioniert die appendChild-Methode nicht.

Lösung:

Code kopieren Der Code lautet wie folgt:

//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 Listen wie ul und ol entfernt 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, siehe ↓ für Details ​​​[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-Frameset 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 für die Entwicklung geeigneter Vorschlag besteht darin, dass die Seite unter Verwendung des Standard-DHTML-Standards geschrieben werden sollte, mit weniger Verwendung von Tabellen, und dass CSS-Definitionen so weit wie möglich auf dem Standard-DOM basieren sollten, unter Berücksichtigung gängiger Browser wie IE, Firefox und Opera. Übrigens sind die CSS-Interpretationsstandards von FF und Opera in vielen Fällen näher an den CSS-Standards und normativer.