Hack技术
1、IE条件注释法，微软官方推荐的hack方式。
只在IE下生效
<!--[if IE]>
<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />
<![endif]-->
只在IE6以上版本生效
<!--[if gt IE 6]>
<link rel="stylesheet" href="/gt-ie6.css" type="text/css" media="screen" />
<![endif]-->
只在IE7上不生效
<!--[if ! IE 7]>
<link rel="stylesheet" href="/not-ie7.css" type="text/css" media="screen" />
<![endif]-->
非IE浏览器生效
<!--[if !IE]><!-->
<link rel="stylesheet" href="/no-ie.css" type="text/css" media="screen" />
<!--<![endif]-->
2、常用的css hack代码
样式属性前缀法
.csshack{
background:blue;
background:blue9; /*all ie*/
background:blue /; /*ie8-ie9*/
background/***/: blue9; /* ie7-ie8*/
*background:blue;/* or #background: blue */ /*ie6-ie7*/
+background:blue; /*ie7*/
_background:blue; /*ie6*/
}
选择符前缀法
/* IE 7 */
*:first-child+html{}
/* IE 7 */
html > body #ie7 { *display: block; }
/* IE 6 */
* html #div{ }
/* IE 6 */
body #ie6 { _display: block; }
/*IE7及其更低版本*/
*:first-child+html{}*html{}
/*IE7,IE7以上和主流浏览器*/
html>body{}
/*适合主流浏览器(IE7排除在外，IE7以下的也不行)*/
html>/**/body{}
/* Firefox 1 - 2 */
body:empty #firefox12 { display: block; }
/* Firefox */
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; } }
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
3、IE条件注释并不是只用于样式表文件，它还有其它的形式来进行Hack。
IE条件注释与style标签：
<!--[if IE 6]>
<style type="text/css"> /* css for IE 6 */ </style>
<![endif]-->
IE条件注释与script标签：
<!--[if IE 6]>
<script type="text/javascript"> alert("我是IE6"); </script>
<![endif]-->
IE条件注释与html标签：
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
4、IE CSS Media
/* IE6/7 only (via Keith Clarke) */
@media screen9 { }
/* IE8 (via Keith Clarke) */
@media screen { }
/* IE6/7/8 (via Keith Clarke) */
@media screen\,screen9 {}
/* IE8/9/10 */
@media screen { }
@media screen and (min-0 ) {
body { background: yellow; }
}