掌握 CSS Hacks 可以說是前端開發工程師的一個基本技能。隨著浏覽器版本的遍地開花,我們尋找著盡可能使各種浏覽器表現一致的 CSS 寫法。當然 CSS Hacks 是最為流行的解決方案。但對於 IE 而言,目前已經有 IE6/IE7/IE8 三個主要版本,不久的將來還會有 IE9 的到來。於此,IE 是個杯具。
當然有很多人歇斯底裡地诋毀 IE6,在此想說的是,一切诋毀 IE6 的言論都是紙老虎。看看 IE6 的歷史,它絕不是一個錯誤的存在。IE7/IE8 這些有嚴重後遺症的版本才是導致一切杯具的罪魁禍首。下面是各個 IE 版本的 CSS Hacks 寫法:
IE6:
_selector{property:value;} selector{property:value;property:value!important;} //IE6 不支持同一選擇符中的 !important
IE7:
+selector{property:value;}
IE8:
selector{property:value\0;}
IE6 & IE7:
*selector{property:value;}
IE6 & IE7 & IE8:
selector{property:value\9;}
可悲的是,IE8 會自作主張的將頁面按照 IE7 模式進行渲染。目前針對 IE 多版本兼容的現狀,通常會采用設置 X-UA-Compatible HTTP 頭的方式開啟 IE8 的兼容模式,這樣能在一定程度上減少調試 IE 的工作量。代碼如下:
<meta http-equiv="X-UA-Compatible" content="IE=7"> //標准 IE7 模式 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> //兼容 IE7 模式
你也可能會碰到另一種情況:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">//標准 IE 模式
IE8 在沒有申明 IE=Edge 的情況下還是會存在以兼容模式渲染的情況,這種設置方案 (IE=Edge) 目前口碑網正在應用。
關於 IE=Edge 詳細參考:http://lists.whatwg.org/htdig.CGI/whatwg-whatwg.org/2008-January/013635.Html