網頁制作Poluoluo文章簡介:IE6終極備忘單——對IE6單獨兼容.
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻譯:http://www.vfresh.org/w3c/727(譯文對原文進行了補充)
兼容IE6的第一步就是單獨對IE進行兼容,你針對IE6所寫的代碼只影響IE6;有幾種方法可以區分開IE6:IE特有條件注釋、CSS選擇器、JavaScript,我們將逐一討論。
使用IE特有條件注釋
微軟給IE添加了條件注釋以區分不同版本,任何東西都可以塞進條件注釋裡:標簽、JavaScript、js文件、css、內聯樣式。可以使用條件注釋來針對某一個IE浏覽器版本來編寫代碼。
規則如下:(譯注:可參考IE 特有注釋(hack))
運行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
使用條件注釋加載css的好處是這些樣式是獨立於其他css文件的,因此不會在編寫兼容代碼時弄得一團糟;而且當IE6的市場份額降低到不需要兼容時,可以快速的清理掉。
使用條件注釋的唯一缺點是在IE浏覽器下會增加額外的HTTP請求數,所以需要權衡是否這樣做。但我不建議使用條件注釋加載外部js文件,因為js文件會造成阻滯,在js未加載完之前其余文件都不會被加載;對於js請使用JavaScript程序來區分浏覽器而非條件注釋。
使用CSS選擇器區分開IE6
如果你不打算使用條件注釋,CSS選擇器是另外一個區分開IE6的辦法,IE6不支持子選擇器;先針對IE6使用常規申明CSS選擇器,然後再用子選擇器針對IE7+及其他浏覽器。
示例:
運行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
這個方法的缺點是容易把樣式表弄得一團糟,所以一定要寫好注釋說明。
在示例中,針對IE6寫的樣式在其他浏覽器中也會執行,但(標准浏覽器中)之後的子選擇器覆蓋了之前的申明,而IE6不支持子選擇器所以忽略了它。
擴展閱讀:
使用JavaScript區分開IE6
如果你想要使用JavaScript區分開IE6,請看示例:
//原生JavaScript
if(typeof document.body.style.maxHeight === "undefined") {
alert('IE6 Detected');
}
//MooTools(框架)
if (Browser.Engine.trident4) {
alert('IE6 Detected');
}
//jQuery(框架)
if (($.browser.msie) && ($.browser.version == "6.0")){
alert('IE6 Detected');
}
擴展閱讀: