CSS Hack

Internet Explorer CSS Hack

IE 条件注释 <!--[if IE]>IE only<![endif]-->

<!--[if lt IE 9]>Less Than IE9<![endif]-->
<!--[if lte IE 9]>Less Than or Equal IE9<![endif]-->
<!--[if IE]>IE only<![endif]-->
<!--[if IE 6]>IE6 only<![endif]-->
<!--[if IE 7]>IE7 only<![endif]-->
<!--[if gt IE 6]> Greater Than IE6<![endif]-->
<!--[if gte IE 6]> Greater Than or Equal IE6<![endif]-->
...

如果你使用IE浏览器，则此处(ie6ie7ie8ie9no-ie)将显示IE的版本号，这是通过CSS的display属性控制显示的。

CSS 选择器(Selector)Hack

/***** Selector Hacks ******/
/* IE6 and below */ 
* html .setest  { color: red } 

/* IE7 */ 
*:first-child+html .setest { color: blue }

/* IE7 */ 
*+html .setest {  color: blue }

/* IE7, FF, Saf, Opera  */ 
html>body .setest { color: green }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
html>/**/body .setest { color: #ccc } 

/* Everything but IE6-8 */ 
:root *> .setest { color: #000  }

注意在不同浏览器下此行的颜色，这是根据上面的代码显示的。

CSS 属性(Attribute)Hack

.attest{
  color: blue !ie; /* IE6, IE7 -- acts as an !important string after ! can be anything */ 
  color/**/: green; /* Everything but IE6 */ 
  color:#000; /* all */
  +color:blue; /* ie7 */
  _color:red; /*ie6注意ie7的"+"号hack写在前端，ietester中的ie6认识"+"*/
  *color:#ccc; /* ie6-7 or #color: 777 */
  color:#fafafa\9; /* all-ie */
  color/*\**/: #ddd\9; /* IE7, IE8 */ 
  color: #fefefe\0; /* IE8, IE9 */ 
}

注意在不同浏览器下此行的颜色，这是根据上面的代码显示的。

Firefox CSS Hack

/* all firefox */
@-moz-document url-prefix(){ 
  .fftest{color:red;}
}

/* Firefox only. 1+ */
.fftest,  x:-moz-any-link  { color: red } 

/* Firefox 3.0+ */ 
.fftest,  x:-moz-any-link, x:default  { color: red  }

这是根据上面的代码显示的，在Firefox下是红色的

Opera CSS Hack

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
  head~body .optest { color: red }
}

这是根据上面的代码显示的，在Opera下是红色的

Safari CSS Hack

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
  .satest { color: red; }
}

/* Safari 2-3 */ 
html[xmlns*=""] body:last-child .satest { color: red; }

/* Safari 2 - 3.1 */ 
html[xmlns*=""]:root #.satest  { color: red; }

这是根据上面的代码显示的，在Safari下是红色的

Chrome及其它

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:nth-of-type(1) .chtest { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type .chtest {  color: red }

/* saf3+, chrome1+ */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .chtest  { color: red  } 
}

/* iPhone / mobile webkit */ 
@media screen and (max-device-width: 480px) { 
  .chtest{ color: red  }
} 

这个可以自行测试去了，写的太多，不想写了...