作為一個(gè)前端，工作過(guò)程中總免不了會(huì)遇到一些瀏覽器兼容性的問(wèn)題， 編碼過(guò)程中對(duì)于兼容性有一定的預(yù)見(jiàn)性會(huì)大大提高編碼效率，因此對(duì)于各大瀏覽器的兼容性總結(jié)還是很有必要的。

內(nèi)核

平時(shí)人們上網(wǎng)用的瀏覽器五花八門(mén)，這些瀏覽器的內(nèi)核是不盡相同的，瀏覽器的內(nèi)核決定了瀏覽器對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋?zhuān)虼瞬煌膬?nèi)核將導(dǎo)致不同的渲染效果，也就產(chǎn)生了瀏覽器的兼容性問(wèn)題。目前的瀏覽器內(nèi)核主要有以下幾種:

• Trident ([‘tra?d(?)nt])
  Trident內(nèi)核又被稱(chēng)為IE內(nèi)核,常見(jiàn)的瀏覽器有IE6-IE10,360瀏覽器（1.0-5.0是Trident,6.0是Trident+Webkit，7.0是Trident+Blink），獵豹瀏覽器（1.0-4.2版本是Trident+Webkit，4.3及以后版本為T(mén)rident+Blink）；傲游瀏覽器（傲游1.x、2.x為IE內(nèi)核，3.x為Webkit雙內(nèi)核）；百度瀏覽器的早期版本，世界之窗瀏覽器（ 最初為IE內(nèi)核，2013年采用chorme+IE內(nèi)核）；騰訊TT,搜狗高速瀏覽器（1.x是Trident，2.0以后是Trident+Webkit），UC瀏覽器（Blink內(nèi)核+Trident內(nèi)核）；
• Gecko（[‘gek??])
  Gecko又稱(chēng)為Firefox內(nèi)核，最開(kāi)始由Netscape6開(kāi)始采用，后來(lái)火狐瀏覽器采用，其特點(diǎn)是代碼公開(kāi)，因此全世界程序員都可以對(duì)其進(jìn)行代碼編寫(xiě)。
• Presto([‘prest??])
  Presto瀏覽器是Opera的前內(nèi)核，現(xiàn)在已經(jīng)停止使用，Opera現(xiàn)在已經(jīng)改用Blink內(nèi)核。
• Webkit內(nèi)核
  webkit內(nèi)核是蘋(píng)果公司自己開(kāi)發(fā)的，safari瀏覽器使用。常見(jiàn)瀏覽器傲游瀏覽器3，Android默認(rèn)瀏覽器
• Blink/Chormium
  由谷歌發(fā)布，Blink是Webkit的分支，在Webkit的基礎(chǔ)上研發(fā)更加快速和渲染引擎更加簡(jiǎn)約，并逐步脫離Webkit影響。

瀏覽器的兼容性通?？梢苑譃閏ss樣式渲染的兼容性和api差異:

常見(jiàn)的css兼容性問(wèn)題（不考慮IE6）

• 瀏覽器對(duì)于樣式的初始化不同
  我們可以采用 *{margin:0;padding:0;}這種方式來(lái)清除瀏覽器初始的默認(rèn)邊距，這種方式寫(xiě)起來(lái)簡(jiǎn)單，但是通配符就需要把所有的標(biāo)簽遍歷一遍，當(dāng)網(wǎng)站較大時(shí)，樣式比較多，這樣寫(xiě)會(huì)大大加大網(wǎng)站運(yùn)行的負(fù)載，會(huì)使網(wǎng)站加載時(shí)間過(guò)長(zhǎng)。
  所以我們應(yīng)該把reset的元素單獨(dú)列出來(lái)，具體初始化某個(gè)標(biāo)簽，或者也可以使用Normalize.css和reset.css，這兩個(gè)瀏覽器默認(rèn)樣式重置庫(kù)。
• 透明度
  IE: filter: alpha(opacity=60)
  非IE: opacity:0.6
• IE7-IE9在設(shè)置了margin:0 auto;后不能使div居中顯示
• Firefox點(diǎn)擊鏈接出現(xiàn)虛線框
  。。。未完待續(xù)

常見(jiàn)的api兼容

• 瀏覽器寬高問(wèn)題

var winW = document.body.clientWidth || document.documentElement.clientWidth; // 獲取網(wǎng)頁(yè)可見(jiàn)區(qū)域的寬度
var winH = document.body.clientHeight || document.documentElement.clientHeight; // 獲取網(wǎng)頁(yè)可見(jiàn)區(qū)域高度
// 以上都不包含邊框的寬高，滾動(dòng)條高度，offsetWidth和offsetHeight包含邊框和滾動(dòng)條高度
var winW = document.body.scrollWidth || document.documentElement.scrollWidth;
var winW = document.body.scrollHeight || document.documentElement.scrollHeight;
// 獲取整個(gè)網(wǎng)頁(yè)的寬高，包括滾動(dòng)隱藏掉的距離
var winW = document.body.scrollTop || document.documentElement.crollTop;
var winW = document.body.scrollLeft || document.documentElement.scrollLeft;
// 瀏覽器被卷去的距離
var  screenH = window.screen.height; //   屏幕分辨率的高
var screenW = window.screen.width; // 屏幕分辨率的寬
var screenX = window.screenLeft; // 瀏覽器窗口相對(duì)于屏幕的x坐標(biāo)（除FireFox）
var screenXX = window.screenX; // FireFox相對(duì)于屏幕的x坐標(biāo)
var screenY= window.screenTop; // 瀏覽器窗口相對(duì)于屏幕的y坐標(biāo)（除FireFox）
var screenYY = window.screenY; // FireFox相對(duì)于屏幕的y坐標(biāo)

• 事件相關(guān)

  // 設(shè)置監(jiān)聽(tīng)事件
function addEvent(obj,type,fn) { // 添加事件監(jiān)聽(tīng)，三個(gè)參數(shù)分別為對(duì)象，事件類(lèi)型，事件處理函數(shù)
  if(obj.addEventListener){
      obj.addEventListener(type,fn,false); // 非IE
  }else{
      obj.attachEvent('on'+type,fn);
  }
  
}

// 取消事件監(jiān)聽(tīng)
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else {
        obj.detachEvent('on'+type,fn);
    }
}

// event
document.onclick = function (ev){
  var e = ev; //  谷歌火狐支持，IE9以上支持，以下不支持
}
document.onclick = function(){
  var e = window.event; // 谷歌和IE支持，火狐不支持 
}
// 兼容寫(xiě)法
document.onclick = function(ev) {
  var e = ev || window.event;
}

// 阻止事件冒泡
document.onclick = function(e) {
  var e = e || window.event;
   if(e.stopPropagation){
      e.stopPropagation();
  }else{
      e.cancelBubble = true;
  }
}

// 阻止默認(rèn)事件
  document.onclick = function(e){
      var e = e || window.event;
       if(e.preventDefault){
          e.preventDefault();
      }else {
          e.returnValue = 'false';
      }
  }

• DOM節(jié)點(diǎn)操作
• 獲取類(lèi)名
• 獲取非行間樣式
• 頁(yè)面加載 DOMContentLoaded

參考文章：
主流瀏覽器內(nèi)核介紹（前端開(kāi)發(fā)值得了解的瀏覽器內(nèi)核歷史）
瀏覽器兼容性問(wèn)題及解決方案(CSS部分)
瀏覽器兼容性問(wèn)題及解決方案(JS部分)