如何針對不同的瀏覽器使用不同的 CSS Rule

很不合群的 IE6（或者全部的 IE）為了修飾其不遵守 CSS 標準的行為，所以發明了一大堆專屬的語法，像是在 CSS Rule 前面加上底線，表示 IE 專用，其他瀏覽器就會自動跳過。

為避免該死的 IE6 年代留下來的餘毒，現在有比較乾淨的作法，就是利用 Javascript 偵測瀏覽器的廠牌與版本，然後在 body 加上特定的 class，稍後需要針對特定的瀏覽器做 CSS Rule 差異處理時，就可以利用這個 class。


首先先看看 Javascript 怎麼做？使用 jQuery 來減輕痛苦。

var moca = {};

// 先是一堆偵測瀏覽器廠牌與版本的 function

moca.isIE6 = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /msie 6/.test(agent);
};

moca.isIE7 = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /msie 7/.test(agent);
};

moca.isIE8 = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /msie 8/.test(agent);
};

moca.isIE9 = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /msie 9/.test(agent);
};

moca.isIE67 = function() {
  return moca.isIE6() || moca.isIE7();
};

moca.isIE = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /msie/.test(agent);
};

moca.isFF = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /firefox/.test(agent);
};

moca.isChrome2 = function() {
  var agent = navigator.userAgent.toLowerCase();
  return /chrome\/2/.test(agent);
};

// 重點來了，依據上面的偵測 function 來加上註記

moca.browserSpecific = function() {
  if (moca.isIE6()) {
    $('body').addClass('ie');
    $('body').addClass('ie6');
    $('body').addClass('ie67');
  }
  else if (moca.isIE7()) {
    $('body').addClass('ie');
    $('body').addClass('ie7');
    $('body').addClass('ie67');
  }
  else if (moca.isIE8()) {
    $('body').addClass('ie');
    $('body').addClass('ie8');
  }
  else if (moca.isIE9()) {
    $('body').addClass('ie');
    $('body').addClass('ie9');
  }
  else if (moca.isIE()) {
    $('body').addClass('ie');
  }
  else if (moca.isFF()) {
    $('body').addClass('ff');
  }
  else if (moca.isChrome2()) {
    $('body').addClass('chrome');
    $('body').addClass('chrome2');
  }
};

// 最後，當然每個 HTML Document 都要執行這個蓋印章的 function

$(function(){
  moca.browserSpecific();
});

這樣就完工了！

來看看執行的結果：

最後就是特製的 CSS Rule：

div.title { ... }  // 預設值

body.ff div.title { ... } // Firefox 專屬

body.ie9 div.title { ... } // IE9 專屬

乾乾淨淨，不用被 IE 搞得烏煙瘴氣。