[CSS Hack]解決IE、Firefox、Chrome相容問題


雖然各家瀏覽器都號稱完全符合W3C的標準,但是有些地方CSS的呈現還是不一樣。當然我們可以透過JavaScript判斷不同瀏覽器,然後引入不同CSS檔。另外一個方法去,就是在CSS 上,做一些特別的設定,以下就是介紹如何在CSS中,為各客瀏覽器設定其樣式。

<style>
.test{
    background-color:blue;      /*firefox*/
    background-color:red\9;      /*all ie*/
    background-color:yellow\0;    /*ie8*/
    +background-color:pink;        /*ie7*/
    _background-color:orange;       /*ie6*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){ 
  .test 
   {
      background-color:gray;
   } 
}  /*chrome and safari*/
</style> 
由於firefox不支援特殊CSS HACK,所以只能用一般CSS語法。

IE瀏覽器,則是在後方加「\9」
IE8請使用「\0」
IE7請在最前方使用「+」
IE6請在最前方使用「_」

而Google Chrome 和  safari都是用WebKit核心,所以它們都支援
「 @media screen and (-webkit-min-device-pixel-ratio:0)」
[CSS Hack]解決IE、Firefox、Chrome相容問題 [CSS Hack]解決IE、Firefox、Chrome相容問題 Reviewed by 點讚艾 on 1月 14, 2013 Rating: 5

沒有留言

不管走過路過,記得都要留言