[整理] IE6、IE7、IE8、IE9、Firefox、Chrome、Safari、Opera 的 CSS hack

目前 Mowd 在開發的網站 – 「聚寶評」的目標是成為一個跨瀏覽器的網站
因此針對各家瀏覽器,包括 IE6、IE7、IE8、Firefox 以及 Google Chrome 都要盡量作到介面看起來一致
然而事情不是那麼簡單
光是 IE 來說就有三個不同的版本,每個版本對 CSS 支援的標準也都不一樣
因此 Mowd 整理了下面這一份 CSS hack
在非不得以的時候可以利用以下 CSS hack 達到想要的畫面效果
每一個都是 Mowd 自己有測試過的
如果有不正確的地方歡迎留言指教

  IE6 IE7 IE8 IE9 Firefox 範例
*html V         *html .compability { color: red; }
html* V V       html* .compability { color: red; }
*+html   V       *+html .compability { color: red; }
!important   V V V V .compability { color: red !important; color: green; }
* V V       .compability { *color: red; }
_ V         .compability { _color: red; }
\9 V V V V   .compability { color: red \9; }
+ V V       .compability { +color: red; }
>   V V V V .compability > p

由於 CSS 後面的屬性會覆蓋前面的屬性
因此應該 FF 應該寫在第一個
中間是 IE7 和 IE8
最後一個才是 IE6

11-11-9 補充

  特殊語法
Chrome / Safari @media screen and (-webkit-min-device-pixel-ratio:0) {}
Firefox @-moz-document url-prefix() {}
Opera @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}

在〈[整理] IE6、IE7、IE8、IE9、Firefox、Chrome、Safari、Opera 的 CSS hack〉中有 1 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *