IE/Mozilla CSS hack

因為IE跟Mozilla支援的CSS不盡相同,所以為了讓兩種瀏覽器看起來一樣,總要動點手腳。
如果用CSS來作的話,基本上原則是要利用某些語法只有其中一種支援,加上越後面設定的CSS指令較優先執行,或是越具體的CSS指令越優先執行的特點,所作出來的。

  1. 首先是Box Model Hack
    利用 IE不認得斜線的缺點,但是對於IE6來說,這種Hack有時候不怎麼有效……還搞不清楚為什麼

voice-family: “\"}\"";
voice-family: inherit;

  1. A quick and dirty CSS hack: PNG backgrounds : evolt.org, Visual Design
    用 IE不認得 child selectors (「大於」符號)的缺點

div.hack { color:#fff;}
body > * div.hack { color:#ff0; }

  1. CSS hack for IE6 and NN6
    利用IE會自動修正註解,而Mozilla不會的特點

pre {
color: blue;
anyword: “;
/* For Mozilla only, but won’t work only the next rule */
color:;
color: red;
background: #ccc;
/*";/* here IE can read */
font-weight: bold;
}

這個Hack要用到一個假造的非法屬性,所以可能CSS驗證不會過

  1. 最完整的集大成在:Hide CSS from Browsers,提供了各種CSS與瀏覽器的破解法,這裡是各種瀏覽器對於CSS語法支援程度的整理