Ein sehr guter Artikel über die Unterschiede zwischen js und css in IE und FireFox [Nachdruck von Catching Fire]_Erfahrungsaustausch

Ich habe diesen Artikel über Blue gesehen und finde, dass der Autor ihn gut zusammengefasst hat, zumindest einige davon habe ich nie wirklich gekannt. Diese Dinge sollten eigentlich zusammengefasst werden, aber leider bin ich ein fauler Mensch, deshalb habe ich sie hier zusammengestellt, um mein eigenes Lernen zu erleichtern!

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 des Webseiteninhalts deaktivieren:
Verwenden Sie im Allgemeinen js im IE: obj.onselectstart=function(){return false;}
Und Firefox verwendet CSS:-moz- user -select:none

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


4. Capture-Ereignisse: IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener(" mousemove ",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);


5. Ermitteln Sie die Mausposition:
IE:event.clientX , event.clientY firefox: Die Ereignisfunktion ist erforderlich, um das Ereignisobjekt zu übergeben
obj.onmousemove=function(ev){
　🎜>
6.Grenzprobleme von DIV und anderen Elementen:

Zum Beispiel: Festlegen des CSS eines Div: {width:100px;height:100px;border:#000000 1px solid;}
IE Medium: Breite des Div (einschließlich Rahmenbreite): 100px, Höhe von div (einschließlich Randbreite): 100px; Und Firefox: Breite von div (einschließlich Randbreite): 102px, Höhe von div (einschließlich Randbreite): 102px; Für dieses Drag-Fenster, das mit IE und Firefox kompatibel ist, müssen Sie beim Schreiben von js und css Ihr Gehirn einsetzen. all? true:false; Ich habe eine Variable geschrieben, die die document.all-Syntax unterstützt, andernfalls isIE=false
2. CSS-Verarbeitung unter verschiedenen Browsern:
Sie können !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;}
Dieses Element hat unter Firefox keinen Rahmen , und die Rahmenbreite beträgt 1 Pixel unter IE


Mehrere Unterschiede zwischen XHTML und normalem JS und CSS

Auf der Webseite Das Hinzufügen dieses Codes am Anfang ist der sogenannte XHTML-Standard


Mehrere Unterschiede unter dem XHTML-Standard:
1.document.documentElement und document.body
Legen Sie das CSS der Seite im Code fest. Verwenden Sie unbedingt: document.documentElement
Zum Beispiel: document.documentElement.style.overflow='hidden';
overflow-X, overflow-Y, diese beiden Koordinatenattribute werden von XHTML nicht unterstützt;
2 Wird beim Abrufen des Fensterbereichs der Webseite und des Verschiebungsabstands der Bildlaufleiste verwendet
Das heißt, diese vier Eigenschaften (clientWidth, clientHeight, scrollLeft, scrollTop) müssen document.documentElement verwenden
Aber document.body.appendChild() und document .body.removeChild() kann verwendet werden, aber wenn stattdessen document.documentElement.appendChild() und document.documentElement.removeChild() verwendet werden, wird ein Fehler gemeldet.
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Zusammenfassung: Document.documentElement wird nur für clientWidth und clientHeight verwendet , scrollLeft, scrollTop und document.documentElement.style

3 Nach dem Hinzufügen dieses Standards hat sich auch das Randproblem von IE geändert, und es stimmt nun mit Firefox überein. Dies ist der Vorteil von XHTML – dem Cross-Browser Standard
oben erwähnt:
Legen Sie das CSS eines div fest:: {width:100px;height:100px;border:#000000 1px solid;}
Im IE (normale Situation): div-Breite (einschließlich Rand Breite): 100 Pixel, Div-Höhe (einschließlich Randbreite): 100 Pixel; Firefox (normale Situation): Div-Breite (einschließlich Randbreite): 102 Pixel, Höhe des Div (einschließlich Randbreite): 102 Pixel; 🎜>Nach dem Hinzufügen des XHTML-Standards (IE und Firefox werden abgeglichen, ^_^):
In IE (XHTML): Breite von div (einschließlich Rahmenbreite): 102px, div-Höhe (einschließlich Rahmenbreite): 102px; >Firefox (XHTML):: Div-Breite (einschließlich Randbreite): 102 Pixel, Div-Höhe (einschließlich Randbreite): 102 Pixel;