常見的瀏覽器兼容性問題(小結(jié))
我要評論瀏覽器的兼容性無非還是樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個方面。
樣式兼容性（css）方面
（1） 因?yàn)闅v史原因，不同的瀏覽器樣式存在差異，可以通過 Normalize.css 抹平差異，也可以定制自己的 reset.css，例如通過通配符選擇器，全局重置樣式。
* { margin: 0; padding: 0; }
（2）在CSS3還沒有成為真正的標(biāo)準(zhǔn)時，瀏覽器廠商就開始支持這些屬性的使用了。CSS3樣式語法還存在波動時，瀏覽器廠商提供了針對瀏覽器的前綴，直到現(xiàn)在還是有部分的屬性需要加上瀏覽器前綴。在開發(fā)過程中我們一般通過IDE開發(fā)插件、css 預(yù)處理器以及前端自動化構(gòu)建工程幫我們處理。
瀏覽器內(nèi)核與前綴的對應(yīng)關(guān)系如下
| 主要代表的瀏覽器 | 內(nèi)核 | 前綴 |
|---|---|---|
| IE瀏覽器 | Trident | -ms |
| Firefox | Gecko | -moz |
| Opera | Presto | -o |
| Chrome和Safari | Webkit | -webkit |
交互兼容性（javascript）
（1）事件兼容的問題，我們通常需要會封裝一個適配器的方法，過濾事件句柄綁定、移除、冒泡阻止以及默認(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’是無法被各個瀏覽器中，使用new Date(str)來正確生成日期對象的。 正確的用法是’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);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細(xì)的介紹了幾種我遇到的問題和解決方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-14
對常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-20- 這篇文章主要介紹了CSS瀏覽器兼容性常見問題，ie各版本的瀏覽器的兼容情況做了詳細(xì)介紹，開發(fā)中需要注意到的兼容性問題大家可以注意一下，具體操作步驟大家可查看下文的詳2017-08-16
- 瀏覽器兼容性問題總是讓人很頭疼，這里介紹幾個技巧來避免這個問題,需要的朋友可以參考下2017-04-08
本篇文章主要介紹了CSS3與頁面布局學(xué)習(xí)和總結(jié)——瀏覽器兼容與前端性能優(yōu)化 ，具有一定的參考價(jià)值，有需要的可以了解一下。2022-09-29- 下面小編就為大家?guī)硪黄獪\談瀏覽器的兼容性(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-25
詳解IE瀏覽器的haslayout屬性及相關(guān)兼容性問題解決
haslayout是IE瀏覽器專有的屬性,然而這個屬性卻同樣會給不同版本的IE帶來浮動問題等一些列兼容性上面的麻煩...這里我們就來詳解IE瀏覽器的haslayout屬性及相關(guān)兼容性問題解2016-07-08瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法
下面小編就為大家?guī)硪黄獮g覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起公司小編過來看看吧2016-06-16HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
使用HTML5時就應(yīng)該考慮包括桌面以及移動端的瀏覽器兼容問題,特別是視頻方面瀏覽器對解碼的支持會有所不同,所以下面就來分享一個HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分2016-05-19
