火狐、google、ie的CSS兼容


 body {
               background-color:Black;/*火狐+Google*/
               background-color:red\9\0;/*IE9*/
               background-color:blue\0;/*IE8*/
               *background-color:red;/*IE7,IE6*/
               +background-color:navy;/*IE7*/
               _background-color:green;/*IE6*/
 }

注意點: IE9  支持  \9\0, 中間不要有空格,寫成  background-color:red   \9\0;不會識別。必須 background-color:red\9\0;

            IE8  支持  \0,同樣中間不要有空格。

            IE6,IE7 都支持  * ,

            IE6特別支持 下划線_: _background-color:green;

            IE7特別支持加號+: +background-color:green;

        

定義順序:  火狐Google>IE9>IE8>IE7>IE6;

上面是針對一個 元素的一個css屬性。 如果 要整體兼容 一段CSS代碼, 就要這么寫
/*FireFox,Google瀏覽器*/
#Menu{
       width:1005px; height:30px;background:red; margin:0px auto;
}
/*IE6瀏覽器*/
*html #Menu {
      width:1005px; height:30px;background:navy; margin:0px auto;
}
/*IE7瀏覽器*/
*+html #Menu {
     width:1005px; height:30px;background:gray; margin:0px auto;
}

/*IE7瀏覽器*/
*:first-child+html #Menu {
     width:1005px; height:30px;background:gray; margin:0px auto;
}

IE7  的   *+html #Menu 和*:first-child+html #Menu 2種寫法,效果一樣, 不知道有啥差別,希望網友能給出意見。

注意點: IE6,7都支持*, IE7 特別支持+號。 

當然,如果不一樣的css設置 非常多, 可以針對不同瀏覽器寫css樣式, 在瀏覽器的頭部 根據不同瀏覽器來加載css

首先默認加載通用樣式
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->

還有其他瀏覽器,格式如下

<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上 <![endif]-->
<!--[if IE 7]> 僅IE7 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下<![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上 <![endif]-->
<!--[if IE 8]> 僅IE8 <![endif]-->
<!--[if IE 9]> 僅IE9 <![endif]-->


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM