CSS hack

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方法，但因为他不利于开发和维护，所以事实上最流行的是选择符前缀法和样式属性前缀法。