1.IE条件注释法
因为IE浏览器在CSS的解析上存在很多问题,所以绝大多数的CSS hack都是针对IE进行的。
如果我们想针对IE引入一个CSS文件,
<!--[if IE]>
<link type="text/css" href="test.css" rel="stylesheet">
<![endif]-->
如果我们想针对某个范围以内版本的IE进行hack,可以结合lte,lt,gte,gt,!等关键字来注释。lte表大于等于 lt表小于 gte表大于等于 gt 表大于 !表不等于
<!--[if gt IE 6]>
<link type="text/css" href="test.css" rel="stylesheet">
<![endif]-->
当浏览器版本号大于6时,会加载test.css
事实上,条件注释最常用于CSS的hack,但他能包含的内容其实不仅仅是link标签,还可以用这样的形式来进行hack
<!--[if IE 6]>
<style type="text/css">
.test { }
</style>
<![endif]-->
也可以对JS进行hack
<!--[if IE 6]>
<script type="text/javascript">
alert("我是IE 6");
</script>
<![endif]-->
2.选择符前缀法
选择符前缀法的原理是在CSS选择符前加一些只有特定浏览器才能识别的前缀,从而让某些样式只对特定浏览器生效。如 “*html”前缀只对IE6生效,"*+html"前缀只对IE7生效。
<style type="text/css">
.test {width:80px;} /*IE6,IE7,IE8*/
*html .test{width: 60px;} /*only for IE 6*/
*+html .test{width: 60px;} /*only for IE 7*/
在向后兼容性上存在一定风险。
3.样式属性前缀法
样式属性前缀法的原理是在样式的属性名前加前缀,这些前缀只在特定浏览器下才生效。
例如“_”只在IE 6下生效,"*"在IE6 和IE7下生效
<style type="text/css">
.test{width:80px;*width:70px;_width:60px;}
样式属性前缀法也可以用在内联样式上。
<div class="test" style="width:80px;*width:70px;_width:60px;"></div>
虽然IE条件注释法在理论上是首推的hack方法,但因为他不利于开发和维护,所以事实上最流行的是选择符前缀法和样式属性前缀法。