Common browser compatibility issues (summary)

Browser compatibility is nothing more than style compatibility (css), interaction compatibility (javascript), and browser hacks.

Style compatibility (css)

(1) Due to historical reasons, different browsers have different styles. You can use Normalize.css to smooth out the differences, or you can customize your own reset.css, for example, by using a wildcard selector to globally reset the style.

* { margin: 0; padding: 0; }

(2) Before CSS3 became a true standard, browser manufacturers began to support the use of these properties. When CSS3 style syntax was still fluctuating, browser manufacturers provided browser prefixes, and even now some properties still need to be added with browser prefixes. During the development process, we usually use IDE development plug-ins, CSS preprocessors, and front-end automated build projects to help us.

The correspondence between browser kernels and prefixes is as follows

Interoperability (javascript)

(1) Event compatibility issues: We usually need to encapsulate an adapter method to filter event handle binding, removal, bubbling prevention, and default event behavior processing

 var helper = {}

 // Binding event helper.on = function(target, type, handler) {
 	if(target.addEventListener) {
 		target.addEventListener(type, handler, false);
 	} else {
 		target.attachEvent("on" + type,
 			function(event) {
 				return handler.call(target, event);
 		    }, false);
 	}
 };

 //Cancel event listening helper.remove = function(target, type, handler) {
 	if(target.removeEventListener) {
 		target.removeEventListener(type, handler);
 	} else {
 		target.detachEvent("on" + type,
 	    function(event) {
 			return handler.call(target, event);
 		}, true);
     }
 };

(2) When using the new Date() constructor, '2019-12-09' cannot be correctly generated by using new Date(str) in various browsers. The correct usage is '2019/12/09'.

(3) Get scrollTop through document.documentElement.scrollTop compatible with non-chrome browsers

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

Browser hacks

(1) Quickly determine the IE browser version

<!--[if IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> The cool IE9 browser<![endif]-->

(2) Determine whether it is Safari browser

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

(3) Determine whether it is the Chrome browser

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.