目前 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) {} |
感謝分享~:)