關於CSS跨平台處理,基本的區分是:IE第九版及之前的,可以用

<!--[if lt IE 9]>
<!--[if gt IE 9]>
<!--[if lte IE 9]>
<!--[if gte IE 9]>
<!--[if IE 9]>

等等,到<![endif]–>之間的段落,這些標記是所謂 HTML conditional comment 。

而IE第十版開始有 Webkit 引擎和 HTML5 這些特色來攪局了,而且與其他IE版本不同, IE10 不能像前版一樣讀取指定版次的 conditional comment ,除了可讀到<!–[if !IE]><!–>到<!–<![endif]–>之間的段落。 IE10 專屬的 hack 則是:用 JavaScript 的 if (/@cc_on!@/false){ //這裡屬於IE10 } 判斷式,可以很明確分割出 IE10 ,有別於 Mozilla 或 Chrome 等瀏覽器的不同。

於是,跨瀏覽器的 CSS 架構布局為:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../css/site_ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/site_ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/site_ie8.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="../css/site_ie9.css" />
<![endif]-->
<!--[if !IE]><!-->
function attachLinks() {
    var args = Array.prototype.slice.call(arguments);
    var docHead = document.head;
    var i;
    for (i=0; i<args.length; i++) {
        var temp = document.createElement('link');
        temp.setAttribute('rel', 'stylesheet');
        temp.setAttribute('type', 'text/css');
        temp.setAttribute('href', args[i]);
        docHead.appendChild(temp);
    }
}
(function attachWebkitLinks() {
    if(/@cc_on!@/false){//IE10
        attachLinks('../css/text_ie10.css', '../css/site_ie10.css', '../css/top-menu_ie10.css');
    } else {//Mozilla and others
        attachLinks('../css/text.css', '../css/site.css', '../css/top-menu.css');
    }
})();
<!--<![endif]-->
廣告

About 黃耀賢 (Yau-Hsien Huang)

熱愛 Erlang ,並且有相關工作經驗。喜歡程式語言。喜歡邏輯。目前用 Python 工作。
本篇發表於 Web Programming 並標籤為 , 。將永久鏈結加入書籤。