Posted on by xxc

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語法支援程度的整理