1.Firefox kann InnerText nicht unterstützen.
Firefox unterstützt Innerhtml, unterstützt aber Innertext nicht. Es unterstützt TextContent bei der Implementierung von InnerText, aber die unnötigen Räume bleiben standardmäßig ebenfalls erhalten. Wenn Sie nicht textContent verwenden, können Sie stattdessen auch InnerHTML verwenden, wenn die Zeichenfolge keinen HTML -Code enthält.
2. Es ist verboten, den Webseiteninhalt auszuwählen:
In IE wird JS im Allgemeinen verwendet: obj.onSelectStart = function () {return false;}
Firefox verwendet CSS: -moz-User-Select: None
3. Filterunterstützung (Beispiel: Transparenter Filter):
IE: Filter: Alpha (Deckkraft = 10);
Firefox: -moz-optimal: .10;
4. Ereignisse erfassen:
Dh: obj.setcapture (), obj.releascapture ()
Firefox: Document.AdDeVentListener ("Mousemove", MousEmoveFunction, True);
document.removeEventListener ("Mousemove", MousEmoveFunction, true);
5. Holen Sie sich die Maus Position:
Dh: event.clientX, event.clienty
Firefox: Die Ereignisfunktion muss das Ereignisobjekt übergeben
obj.onmousemove = function (ev) {
X = ev.pagex; y = ev.pagey;
}
6. Grenzfragen von Elementen wie Div:
Zum Beispiel: Setzen Sie die CSS :: {Breite: 100px; Höhe: 100px; Rand:#000000 1px fest;}
In IE: Die Breite der Div (einschließlich der Grenzbreite): 100px, die Höhe des Div (einschließlich der Randbreite): 100px;
Und Firefox: Die Breite des Divs (einschließlich der Grenzbreite): 102px, die Höhe des Div (einschließlich Randbreite): 102px;
Wenn Sie dieses Drag -Fenster tun, das mit IE und Firefox kompatibel ist, sollten Sie Ihr Gehirn verwenden, um JS und CSS zu schreiben und Ihnen zwei Tipps zu geben
1. Bestimmen Sie den Browsertyp:
var isie = document.all? wahr: falsch;
Ich habe eine Variable geschrieben, wenn dokument
2. CSS -Verarbeitung in verschiedenen Browsern:
Im Allgemeinen können Sie verwenden! Wichtig, um CSS -Anweisungen zu priorisieren (nur von Firefox unterstützt)
Zum Beispiel: {Border-Width: 0px! Wichtig; Grenzbreite: 1px;}
Unter Firefox hat dieses Element keine Grenze, und unter IE ist die Grenzbreite 1PX
1.Document.formName.Item ("itemName") Problem
Problembeschreibung: In IE können Sie document.formName.item ("itemName") oder document.formName.elements ["elementname"] verwenden; In Firefox können Sie nur document.formName.elements ["elementname"] verwenden.
Lösung: Verwenden Sie document.formName.elements ["elementname"] auf einheitliche Weise.
2. Problem des Sammelnobjekts
Problembeschreibung: In IE können Sie () oder [] das Sammlungsklassenobjekt verwenden; In Firefox können Sie nur [] verwenden, um das Sammlungsklassenobjekt zu erhalten.
Lösung: Verwenden Sie [], um Einheitliche Klassenobjekte auf einheitliche Weise zu erhalten.
3.. Benutzerdefinierte Attributprobleme
Problembeschreibung: In IE können Sie die Methode zum Erhalten regelmäßiger Attribute verwenden, um benutzerdefinierte Attribute zu erhalten, oder Sie können GetAttribute () verwenden, um benutzerdefinierte Attribute zu erhalten. In Firefox können Sie nur GetAttribute () verwenden, um benutzerdefinierte Attribute zu erhalten.
Problemumgehung: Erhalten Sie einheitlich benutzerdefinierte Attribute über getAtTribute ().
4. EVAL ("IDNAME") Problem
Problembeschreibung: In IE können Sie Eval ("IDName") oder getElementById ("idName") verwenden, um ein HTML -Objekt mit IDNAME zu erhalten. In Firefox können Sie nur GetElementById ("IdName") verwenden, um ein HTML -Objekt mit IDNAME zu erhalten.
Lösung: Verwenden Sie GetElementById ("IDName"), um das HTML -Objekt mit ID als IDName zu erhalten.
5. Problem mit demselben Variablennamen wie die HTML -Objekt -ID
Problembeschreibung: Unter IE kann die ID des HTML -Objekts direkt als variabler Name des untergeordneten Objekts des Dokuments verwendet werden, jedoch nicht in Firefox. Unter Firefox kann der variable Name, der mit der HTML -Objekt -ID übereinstimmt, verwendet werden, jedoch nicht in IE.
Problemumgehung: Verwenden Sie document.getElementById ("idName") anstelle von document.idname. Es ist am besten, keine Variablennamen mit derselben HTML -Objekt -ID zu nehmen, um Fehler zu reduzieren. Fügen Sie beim Deklarieren von Variablen das Schlüsselwort VAR hinzu, um Unklarheiten zu vermeiden.
6. Konsum
Problembeschreibung: In Firefox können Sie das Schlüsselwort const oder das VAR -Schlüsselwort verwenden, um Konstanten zu definieren. In IE können Sie das VAR -Schlüsselwort nur verwenden, um Konstanten zu definieren.
Lösung: Verwenden Sie das VAR -Schlüsselwort, um Konstanten einheitlich zu definieren.
7. Input.Type Attributproblem
Problembeschreibung: Die Eigenschaft Eingabe.typ unter IE ist schreibgeschützt; Aber die Eigenschaft Eingabe.type unter Firefox ist Leseschreiber.
Lösung: Ändern Sie nicht die Eigenschaft Eingabe.typ. Wenn Sie es ändern müssen, können Sie zuerst die ursprüngliche Eingabe ausblenden und dann ein neues Eingangselement in derselben Position einfügen.
8.Window.Event Problem
Problembeschreibung: Window.event kann nur unter IE, nicht in Firefox, laufen, da das Firefox -Ereignis nur in der Szene verwendet werden kann, in der das Ereignis auftritt.
Lösung: Fügen Sie der Funktion, in der das Ereignis auftritt, Ereignisparameter hinzu und verwenden Sie var myevent = evt? Evt: (window.event? Window.event: null)
Beispiel:
Die Codekopie lautet wie folgt:
<input type = "button" onclick = "dosomething (Ereignis)"/>
<script Language = "JavaScript">
Funktion Dosen (evt) {
var myevent = evt? evt: (window.event? window.event: null)
...
}
9. Event.x und Event.y Themen
Problembeschreibung: Unter IE hat das gleichmäßige Objekt X- und Y -Attribute, aber keine Seitex- und Seitenattribute; Unter Firefox verfügt das gleichmäßige Objekt über PageX- und Seitenattribute, 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 das 8. Problem berücksichtigen, verwenden Sie einfach MyEvent anstelle von Ereignis.
10.Event.srcelement Problem
Problembeschreibung: Unter IE hat das gleichmäßige Objekt eine Srcelement -Eigenschaft, aber keine Zieleigenschaft; Unter Firefox verfügt das gleichmäßige Objekt über eine Zieleigenschaft, aber keine Srcelement -Eigenschaft.
Lösung: Verwenden Sie srcobj = event.srcelement? event.srcelement: event.target;
Wenn Sie das 8. Problem berücksichtigen, verwenden Sie einfach MyEvent anstelle von Ereignis.
11.Window.Location.href Problem
Problembeschreibung: In IE oder Firefox2.0.x können Sie window.location oder window.location.href verwenden; In Firefox1.5.x können Sie nur Windows.location verwenden.
Problemumgehung: Verwenden Sie Window.location anstelle von window.location.href. Natürlich können Sie auch in Betracht ziehen, die Methode von Ort.Replace () zu verwenden.
12. Modale und nicht modale Fensterprobleme
Problembeschreibung: Unter IE können modale und nicht modale Fenster über Showmodaldialog und ShowmodelessDialog geöffnet werden; Unter Firefox kann es nicht.
Lösung: Verwenden Sie Window.open (Pageurl, Name, Parameter), um ein neues Fenster zu öffnen.
Wenn Sie die Parameter im untergeordneten Fenster zurück zum übergeordneten Fenster übergeben müssen, können Sie das Fenster verwenden. Opener im untergeordneten Fenster, um auf das übergeordnete Fenster zuzugreifen. Wenn das übergeordnete Fenster das untergeordnete Fenster steuern muss, verwenden Sie var subwindow = window.open (pageurl, Name, Parameter); um das neu geöffnete Fensterobjekt zu erhalten.
13.Frame- und Iframe -Probleme
Der folgende Rahmen ist ein Beispiel:
<Frame Src = "xxx.html" id = "FrameID" name = "Framenname" />
(1) Zugriffs -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.
(2) Switch -Rahmeninhalt
Sowohl in IE als auch in Firefox können Sie Window.Document.getElementById ("FrameID") verwenden.
Wenn Sie die Parameter im Rahmen zurück an das übergeordnete Fenster übergeben müssen, können Sie das übergeordnete Schlüsselwort im Rahmen verwenden, um auf das übergeordnete Fenster zuzugreifen.
14. Problem der Körperbelastung
Problembeschreibung: Das Körperobjekt von Firefox existiert, bevor der Body -Tag vollständig vom Browser gelesen wird. Während IEs Körperobjekt existieren muss, nachdem der Body -Tag vollständig vom Browser gelesen wurde.
[Hinweis] Dieses Problem wurde noch nicht überprüft und wird nach der Überprüfung geändert.
[Hinweis] Es wurde bewiesen, dass die oben genannten Probleme in IE6, Opera9 und Firefox2 nicht vorhanden sind. Ein einfaches JS -Skript kann auf alle Objekte und Elemente zugreifen, die vor dem Skript geladen wurden, auch wenn dieses Element noch nicht geladen wurde.
15. Ereignisdelegierte Methode
Problembeschreibung: Verwenden Sie in IE document.body.onload = Inject; wo function inject () vor diesem implementiert wurde; Verwenden Sie in Firefox 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 zwischen zugegriffenen übergeordneten Elementen
Problembeschreibung: Verwenden Sie unter IE Obj.Parentelement oder Obj.Parentnode, um auf OBJs übergeordnete Knoten zuzugreifen. Verwenden Sie unter Firefox Obj.Parentnode, um auf OBJs übergeordnete Knoten zuzugreifen.
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
Problembeschreibung: Firefox unterstützt keine Hand, aber der IE unterstützt Zeiger, beide sind handförmige Indikatoren.
Lösung: Verwenden Sie Zeiger einheitlich.
18. Das Problem mit InnerText.
Problembeschreibung: InnerText funktioniert im IE ordnungsgemäß, aber InnerText funktioniert nicht in Firefox.
Problemumgehung: Verwenden Sie TextContent anstelle von InnerText in Nicht-IE-Browsern.
Beispiel:
Die Codekopie lautet wie folgt:
if (navigator.appname.indexof ("explorer")> -1) {
document.GetElementById ('Element'). InnerText = "Mein Text";
} anders{
document.getElementById ('Element'). textContent = "Mein Text";
}
[Anmerkung] Innerhtml wird von Browsern wie IE und Firefox unterstützt. Andere, wie beispielsweise Outerhtml, werden nur von dem IE unterstützt, daher ist es am besten, es nicht zu verwenden.
19. Problem mit Objektbreite und Höhenzuweisung
Problembeschreibung: Die ähnliche Aussage wie obj.style.height = imgobj.height in Firefox ist ungültig.
Lösung: Verwenden Sie obj.style.height = imgobj.height + 'px' in Uniform;
20. Tischbetriebsprobleme
Problembeschreibung: IE, Firefox und andere Browser haben unterschiedliche Operationen auf Tabellen -Tags. In IE darf es den Tischwerten nicht zuweisen, innerhtml -Werte zuzuweisen. Bei der Verwendung von JS funktioniert die Verwendung der Apfel -Methode nicht.
Lösung:
Die Codekopie lautet wie folgt:
// Fügen Sie der Tabelle eine leere Zeile hinzu:
var row = otable.insertrow (-1);
var cell = document.createelement ("td");
cell.innerhtml = "";
cell.className = "xxxx";
Row.AppendChild (Zelle);
[Anmerkung] Da ich JS selten verwende, um Tabellen direkt zu bedienen, habe ich dieses Problem noch nie gestoßen. Es wird empfohlen, JS -Framework -Sets zu verwenden, um Tabellen wie JQuery zu manipulieren.
21. Ausgabe von UL- und OL -Listeneindrückung
Bei der Beseitigung der Eindrücke von Listen wie UL, OL usw. sollte der Stil geschrieben werden als: Listenstil: Keine; Rand: 0px; Polsterung: 0px;
Das Margin -Attribut gilt für den IE und das Padding -Attribut gilt für Firefox. ← Dieser Satz ist falsch. Weitere Informationen finden Sie ↓
[Hinweis] Dieses Problem wurde noch nicht überprüft und wird nach der Überprüfung geändert.
[Anmerkung] Es wurde bewiesen, dass in IE den Rand festgelegt wird: 0px kann die linken und rechten Ein- und Rechten, Lücken, Listennummern oder Punkte der Liste entfernen, und das Setzen von Polsterung hat keinen Einfluss auf den Stil. In Firefox kann das Einstellen von Rand: 0PX nur den Auf- und Ab-Weißraum entfernen und nach dem Einstellen von Polsterung: 0px kann nur die linken und rechten Einbindungen entfernen, und Sie müssen auch Listenstil festlegen: Keine, um die Listennummer oder die Punkte zu entfernen. Mit anderen Worten, in IE können Sie den endgültigen Effekt erzielen, indem Sie einfach Rand einstellen: 0PX, Polsterung: 0PX und Listenstil: Keine muss zur gleichen Zeit in Firefox festgelegt werden, um den endgültigen Effekt zu erzielen.
22. Problem mit CSS -Transparenz
IE: Filter: Progid: DimaMagetransform.Microsoft.Alpha (style = 0, opacity = 60).
FF: Deckkraft: 0,6.
[Hinweis] Es ist am besten, beide zu schreiben und das Depazitätsattribut unten zu setzen.
23. CSS abgerundete Eckproblem
IE: Die folgenden Versionen von IE7 unterstützen nicht abgerundete 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;.
[Anmerkung] Das abgerundete Eckproblem ist ein klassisches Problem in CSS. Es wird empfohlen, das JQuery -Framework auf abgerundete Ecken zu verwenden, um diese komplexen Probleme für andere nachzudenken.
Es gibt zu viele Fragen zu CSS, und selbst dieselben CSS -Definitionen haben unterschiedliche Anzeigeneffekte in verschiedenen Seitenstandards. Ein geeigneter Vorschlag ist, dass die Seite im Standard -DHTML -Standard geschrieben ist und die Verwendung von Tabellen selten verwendet wird. Die CSS -Definition sollte so weit wie möglich auf dem Standard -DOM basieren, und die Mainstream -Browser wie IE, Firefox und Opera werden ebenfalls berücksichtigt. Übrigens sind in vielen Fällen die CSS -Interpretationsstandards von FF und Oper näher an den CSS -Standards und standardisierter.