Das Thema, das wir diskutieren, ist das CSS-Webseitenlayout. Obwohl 52CSS.com viel Wissen in diese Richtung gebracht hat, verwirrt es immer noch viele Entwickler -Drei Unterschiede zwischen JavaScript und JavaScript in IE und Firefox. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.
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. Probleme mit Sammlungsobjekten <br /> Problembeschreibung: 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. Problem mit benutzerdefinierten Attributen <br /> Problembeschreibung: 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 unter Firefox abzurufen. Sie können nur getAttribute( verwenden; ), um sie zu erhalten.
Lösung: Erhalten Sie benutzerdefinierte Attribute einheitlich über getAttribute().
4. eval("idName") Problem <br /> Problembeschreibung: Unter IE können Sie eval("idName") oder getElementById("idName") verwenden, um das HTML-Objekt mit der ID idName abzurufen; unter Firefox ist dies möglich Verwenden Sie getElementById („idName“) nur, um das HTML-Objekt mit der ID idName abzurufen.
Lösung: Verwenden Sie getElementById("idName") einheitlich, um das HTML-Objekt zu erhalten, dessen ID idName ist.
5. Das Problem, dass der Variablenname mit der ID eines HTML-Objekts übereinstimmt <br /> Problembeschreibung: 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 es mit dem HTML-Objekt verwendet werden. Variablennamen mit derselben ID können unter IE nicht verwendet werden.
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 <br /> 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. Problem mit dem Attribut „input.type“ <br /> Beschreibung des Problems: Das Attribut „input.type“ unter IE ist schreibgeschützt, das Attribut „input.type“ unter Firefox 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 <br /> Problembeschreibung: 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:
Beispiel-Quellcode [www.downcodes.com] <input type="button" onclick="doSomething(event)"/>
<script language="javascript">
Funktion doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
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 <br /> Problembeschreibung: Unter IE hat das gerade Objekt das srcElement-Attribut, aber kein 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 <br /> 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 verwenden. Standort .
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 <br /> 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 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 <br /> Nehmen Sie den folgenden Frame als Beispiel:
<frame src="http://www.downcodes.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 = "52css.com.html" oder window.frameName.location = "52css.com.html" sowohl im IE als auch in Firefox verwenden . Der Inhalt des Frames;
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 <br /> Beschreibung des Problems: Das Body-Objekt von Firefox existiert, bevor das Body-Tag vollständig vom Browser gelesen wurde, während das Body-Objekt von IE geladen werden 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. Ereignisdelegierungsmethode <br /> Problembeschreibung: 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. Unterschiede bei den übergeordneten Elementen, auf die zugegriffen wird <br /> Problembeschreibung: 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 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:
Beispiel-Quellcode [www.downcodes.com] if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "mein Text";
} anders{
document.getElementById('element').textContent = "mein Text";
}
19. Problem bei der Zuweisung von Objektbreite und -höhe <br /> Problembeschreibung: Anweisungen ähnlich wie obj.style.height = imgObj.height in FireFox sind ungültig.
Lösung: Verwenden Sie obj.style.height = imgObj.height + 'px';
20. Probleme mit Tabellenoperationen <br /> Beschreibung des Problems: IE, Firefox und andere Browser haben unterschiedliche Operationen für das Tabellen-Tag. Im IE ist die innerHTML-Zuweisung von table und tr nicht zulässig, wenn js zum Hinzufügen eines tr verwendet wird Die appendChild-Methode funktioniert auch nicht.
Lösung:
Beispiel-Quellcode [www.downcodes.com] //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);
21. Einrückungsproblem von ul- und ol-Listen <br /> 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. Weitere Informationen finden Sie im Artikel auf 52CSS.com. Ein Vorschlag, der mit der Entwicklung übereinstimmt, ist, dass die Seite unter Verwendung des Standard-DHTML-Standards geschrieben werden sollte, mit weniger Verwendung von Tabellen. Die CSS-Definition sollte so weit wie möglich auf dem Standard-DOM basieren und gängige Browser wie den IE berücksichtigen , Firefox und Opera. Übrigens sind die CSS-Interpretationsstandards von FF und Opera in vielen Fällen näher an den CSS-Standards und normativer. 