DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 一切诋毀IE6的言論都是紙老虎:CSS Hacks
一切诋毀IE6的言論都是紙老虎:CSS Hacks
編輯:CSS進階教程     

掌握 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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved