Zero159

萬惡IE成為大家的箭靶也不是第一天了，除了安全漏洞外，最讓網頁開發者頭痛的就是CSS支援的問題，每次在IE上排版完後，在Firefox上看就完全不一樣，在Firefox上排好則IE又亂掉了。關於IE或是其他瀏覽器在顯示上面的問題打算整理完寫在下一篇。今天先來討論怎麼透過CSS Filter(CSS Hacks... whatever)來替特定的瀏覽器指定專屬的屬性，或是採用自己專屬的樣式表。(這篇主要都是解決排版問題或是說指定給不同瀏覽器不同的排版格式)

CSS Filter的目的就是要用特定的CSS語法來過濾掉某些特定的瀏覽器，首先對於各種不同的CSS Filter一定要來參考centricle.com上所整理出來的資料，針對各種瀏覽器與CSS Filter之間的支援，雖然有列出很多的方法來實現各種應對上的問題，但有一些是透過錯誤的語法來過濾，所以會照成CSS驗證的錯誤，不過也不是每個網站都把完全符合W3C規範當成必要的需求，畢竟能夠即刻且實用的解決問題還是很迷人的，所以我就擷取一些自己覺得方便好記的方式。

1. 子選擇器法：
   
   IE 6 and below
   * html {}
   IE 7 and below
   *:first-child+html {} * html {}
   IE 7 only
   *:first-child+html {}
   IE 7 and modern browsers only
   html>body {}
   
   example: *:first-child+html #target{}
   
   IE7與Firefox等主流瀏覽器都支援，主要針對IE6與以下的版本是不支援的(但是Mac OS X和Macintosh版的IE還是支援，所以還是盡量別用)。
   (reference:www.webdevout.net)




2. !important：
   
   example:
   #target{
   background: green !important;
   background: red;
   }
   
   當有兩的一樣的屬性同時出現時，IE6與以下的版本會忽略!important的宣告，但!important要放在前面(IE7已修正此問題，其他OS上則未知)。
   (reference:www.webdevout.net)



3. 匯入法：
   
   @import "non-ie.css" all;　
   (IE不支援在@import指定媒體類型，專門給非IE的瀏覽器用。)
   @import 'styles.css'
   @import "styles.css"
   @import url(styles.css)
   @import url('styles.css')
   @import url("styles.css")
   @import "null?\"\{";
   @import "styles.css";
   
   
   (以上過濾掉老爺瀏覽器IE4，Ns4等，請參考centricle.com)
   /*\*//*/
   @import "styles.css";　　　
   /**/
   (只給Mac OS X IE5和Macintosh IE5用)
   
   匯入的方式則是透過一開始就指定特定的樣式表給特定的瀏覽器來使用，所以可以寫一份共用的，再針對有問題的部份一一的指定給特定的瀏覽器來修正。
   (reference:centricle.com，www.webdevout.net)
   




4. 前置特殊符號：
   
   *property:value　(只給IE7及以下的版本)
   _property:value　(只給IE6及以下的版本)
   
   example:
   #target{
   margin-left:30px;//給所有瀏覽器看的
   *margin-left:20px;//給IE全系列看(IE7專用)
   _margin-left:10px;//給IE6及以下版本看的(IE7不會識別此設定)
   }
   
   這個方法我覺得很好用，也很直覺，只要把要改的點抓出來分別針對IE7及IE6作設定就好了(因為通常有問題的就是IE)。但是美中不足的是這樣的CSS是沒辦法通過驗證的，要特別留意。
   (reference:centricle.com，www.webdevout.net)
   




5. voice-family：
   
   voice-family:"\"}\"";
   voice-family:inherit;
   property:value;
   
   example:
   #target{
   margin:0 10px;//設定左右10px的邊距
   width:120px;//給IE5看的寬度
   voice-family:"\"}\"";//IE5會略過以下
   voice-family:inherit;
   width:100px;//修正給其他瀏覽器看的正確寬度
   }
   
   這個方法主要是針對IE5對於Box的長寬解釋而來的，因為CSS規格中，box的長寬與padding、border是分開計算的，而IE5則是把padding、border都算在Box的長寬內，所以實際的box會變的比較小。所以透過這個方法來從新設定新的長寬給IE5的版本。
   (reference:centricle.com)
   




6. star html ：
   
   * html (IE6及以下版本)
   *+html (IE7及IE5.0可識別)
   
   透過這個方法再結合!important及voice-family就可以針對IE7、IE6及IE5.5以下版本做修正，而不適用其他的瀏覽器。
   
   example:
   #target{
   color:red;//給所有瀏覽器用
   }
   * html #target{
   color:yellow;//給IE5.5以下用
   voice-family:"\"}\"";
   voice-family:inherit;
   color:black;//給IE6用
   }
   *+html #target{
   color:green !important;//給IE7用
   }
   
   (reference:centricle.com)
   
   

寫到這邊總算告一段落了，與IE之間的CSS大戰沒這麼容易就算了，還有一大堆bug等著修正，以後有發現不錯的方法再繼續補上去吧。