8 Nov 2017

CSS Hack 浏览器兼容性

使用Google Chrome Frame:IE浏览器外观不变，实际使用Chrome内核

单个元素

 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*/
 }

整体兼容一段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;
}
/* 只支持IE6、7 */
@media screen\9 { }
/* 只支持IE8 */
@media \0screen { }
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 { }
/* 只支持IE8、9、10 */
@media screen\0 { } 
/*IE  webkit and opera */
@media all and (min-width:0){
 .content .test {
     background: #0f0;
 }
}
/* webkit：Chrome、Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .content .test {
     background: #ff0;
 }
}
/* 只支持Opera */
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { } 
/*FireFox*/
@-moz-document url-prefix() {
 .content .test {
     background: #f0f;
 }
}
/*IE9+*/
@media all and (min-width:0) {
 .content .test{
     background: #f009;
     }
}
/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .content .test {
     background: #0ff;
 }
} 

样式文件

 <link rel="stylesheet" type="text/css" href="/style.css" />
 <!--[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]-->

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

 <!-- 2. Google Chrome Frame也可以让IE用上Chrome的引擎 -->
 <meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
 <!-- 3.强制使用IE7模式来解析 -->
 <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –>
 <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>
 <!-- 5.如果一个特定版本的IE支持所要求的兼容性模式多于一种
 <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1″ />
 <!-- 使IE5,IE6兼容到IE7模式（推荐） -->
 <!–[if lt IE 7]>
 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
 <![endif]–>
 <!-- 使IE5,IE6,IE7兼容到IE8模式 -->
 <!–[if lt IE 8]>
 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
 <![endif]–>
 <!-- 使IE5,IE6,IE7,IE8兼容到IE9模式 -->
 <!–[if lt IE 9]>
 <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
 <![endif]–>

CSS Hack 浏览器兼容性

Tags: