Wabow Information Inc. Blog
分類: 技術分享 作者: jaceju
18 六月 2009有些時候我們常會遇到一些瀏覽器 CSS 排版上的問題，尤其是 IE6/7 常會出現跟其他瀏覽器呈現效果不同的狀況。
所以網路上就有高手找出了許多特定的解決方法，以便讓 Web 設計師能針對 IE6/7 來處理這些惱人的 CSS 問題。
* html other-selector {}
原理：因為在 IE6 以下版本，其 DOM 樹狀結構裡的 html 這個 tag 前還有一個匿名的根元素；所以我們就可以利用萬用字元「 * 」來代表這個元素，再加上其下層的 html tag ，將特定的 CSS 規則套用在 IE6 以下版本。
*:first-child+html other-selector {}
原理：和 IE6 一樣，匿名的根元素在 IE7 上還是存在；但 IE7 也支援了「 :first-child 」及「 + 」這兩個 CSS Selector 語法及選擇符號，所以我們就可以利用它們來避免 CSS 規則套用到 IE6 以下版本。
*:first-child+html other-selector {} * html other-selector {}
原理：就是將上面兩個 Hack 結合起來。
html>body other-selector {}
原理：一般符合 CSS 標準的瀏覽器都支援了「 > 」這個選擇符號， IE7 也是。所以對 IE6 以下版本，這個 CSS 規則就不會被套用了。
html>/**/body other-selector {}
原理：這利用到了 IE7 解譯 CSS 上的 Bug ，在 Selector 規則中有 /**/ 註解的話，它就會被 IE7 忽略，而其他標準瀏覽器則會正常解譯。
IE 本身提供了一種條件式註解 (Conditional Comments) ，在 HTML 中我們可以利用這種條件式註解來限定 IE 是否應該解讀該區塊裡的內容，範例如下：
IE6 以下版本： <!--[if lt IE 7]> <link rel="stylesheet" href="for-ie6.css" type="text/css" media="screen" /> <![endif]--> 僅針對 IE7 <!--[if IE 7]> <link rel="stylesheet" href="for-ie7.css" type="text/css" media="screen" /> <![endif]-->
因為是利用到了 HTML 註解，所以其他瀏覽器就不會解譯這段 HTML 碼了。
註： Conditional Comments 當然不僅僅只能使用在 CSS 上，只要我們想讓 HTML 出現在特定的 IE 瀏覽器上的話，都可以利用這個技巧來處理。
這個部落格分享了哇寶在電子商務領域的技術及資訊，希望能讓更多人一起為台灣的網路產業加油。