Häufige Browserkompatibilitätsprobleme (Zusammenfassung)

Browserkompatibilität ist nichts anderes als Stilkompatibilität (CSS), Interaktionskompatibilität (JavaScript) und Browser-Hacks.

Stilkompatibilität (CSS)

(1) Aus historischen Gründen haben verschiedene Browser unterschiedliche Stile. Sie können Normalize.css verwenden, um die Unterschiede auszugleichen, oder Sie können Ihre eigene reset.css anpassen, indem Sie beispielsweise einen Platzhalterselektor verwenden, um den Stil global zurückzusetzen.

* { Rand: 0; Polsterung: 0; }

(2) Bevor CSS3 zu einem echten Standard wurde, begannen Browserhersteller, die Verwendung dieser Eigenschaften zu unterstützen. Als die Syntax des CSS3-Stils noch im Wandel war, stellten die Browserhersteller Browserpräfixe bereit, und auch heute noch müssen einige Eigenschaften mit Browserpräfixen hinzugefügt werden. Während des Entwicklungsprozesses nutzen wir normalerweise IDE-Entwicklungs-Plugins, CSS-Präprozessoren und automatisierte Front-End-Build-Projekte als Unterstützung.

Die Entsprechung zwischen Browserkerneln und Präfixen ist wie folgt

Interoperabilität (Javascript)

(1) Probleme mit der Ereigniskompatibilität: Normalerweise müssen wir eine Adaptermethode kapseln, um die Bindung, Entfernung, Blasenverhinderung und Standardverarbeitung von Ereignishandles zu filtern.

 var Helfer = {}

 // Bindungsereignis helper.on = function(target, type, handler) {
 	wenn(target.addEventListener) {
 		target.addEventListener(Typ, Handler, false);
 	} anders {
 		target.attachEvent("on" + Typ,
 			Funktion(Ereignis) {
 				returniere Handler.Aufruf (Ziel, Ereignis);
 		    }, FALSCH);
 	}
 };

 //Abhören des Ereignisses abbrechen helper.remove = function(target, type, handler) {
 	wenn(ziel.removeEventListener) {
 		target.removeEventListener(Typ, Handler);
 	} anders {
 		target.detachEvent("on" + Typ,
 	    Funktion(Ereignis) {
 			returniere Handler.Aufruf (Ziel, Ereignis);
 		}, WAHR);
     }
 };

(2) Bei Verwendung des Konstruktors new Date() kann in verschiedenen Browsern die Variable „2019-12-09“ durch die Verwendung von new Date(str) nicht korrekt generiert werden. Die korrekte Verwendung ist „09.12.2019“.

(3) ScrollTop wird über document.documentElement.scrollTop kompatibel mit Nicht-Chrome-Browsern

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

Browser-Hacks

(1) Bestimmen Sie schnell die IE-Browserversion

<!--[wenn IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> Der coole IE9-Browser<![endif]-->

(2) Stellen Sie fest, ob es sich um den Safari-Browser handelt

/* Safari */
 var isSafari = /a/.__proto__=='//';

(3) Stellen Sie fest, ob es sich um den Chrome-Browser handelt

/* Chrom */
 var isChrome = Boolean(window.chrome);

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.