web開發(fā)中常見的瀏覽器兼容性問題有哪些

這篇文章將為大家詳細(xì)講解有關(guān)web開發(fā)中常見的瀏覽器兼容性問題有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

瀏覽器的兼容性無非還是樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個(gè)方面。

樣式兼容性（css）方面

（1） 因?yàn)闅v史原因，不同的瀏覽器樣式存在差異，可以通過 Normalize.css 抹平差異，也可以定制自己的 reset.css，例如通過通配符選擇器，全局重置樣式。

* { margin: 0; padding: 0; }

（2）在CSS3還沒有成為真正的標(biāo)準(zhǔn)時(shí)，瀏覽器廠商就開始支持這些屬性的使用了。CSS3樣式語法還存在波動(dòng)時(shí)，瀏覽器廠商提供了針對(duì)瀏覽器的前綴，直到現(xiàn)在還是有部分的屬性需要加上瀏覽器前綴。在開發(fā)過程中我們一般通過IDE開發(fā)插件、css 預(yù)處理器以及前端自動(dòng)化構(gòu)建工程幫我們處理。

瀏覽器內(nèi)核與前綴的對(duì)應(yīng)關(guān)系如下

交互兼容性（javascript）

（1）事件兼容的問題，我們通常需要會(huì)封裝一個(gè)適配器的方法，過濾事件句柄綁定、移除、冒泡阻止以及默認(rèn)事件行為處理

 var  helper = {}

 //綁定事件
 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);
 	}
 };

 //取消事件監(jiān)聽
 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）new Date()構(gòu)造函數(shù)使用，‘2019-12-09’是無法被各個(gè)瀏覽器中，使用new Date(str)來正確生成日期對(duì)象的。 正確的用法是’2019/12/09’.

（3）獲取 scrollTop 通過 document.documentElement.scrollTop 兼容非chrome瀏覽器

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

瀏覽器 hack

（1）快速判斷 IE 瀏覽器版本

<!--[if IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> 騷氣的 ie9 瀏覽器 <![endif]-->

（2）判斷是否是 Safari 瀏覽器

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

（3）判斷是否是 Chrome 瀏覽器

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

關(guān)于“web開發(fā)中常見的瀏覽器兼容性問題有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。