CSS hack技术简介

1.IE条件注释法：

 <!--{if ie}>
<link type="text/css" href="test.css" rel="stylesheet"/>
<!{endif}-->

CSS文件test.css就只加载到IE浏览器了，对于非IE浏览器就会忽略这一点

 <!--{if IE 6}>
<link type="text/css" href="test.css" rel="stylesheet"/>
<!{endif}-->

针对特定版本的浏览器加载CSS文件

针对某个范围内版本的IE进行hack,可以结合lte（小于等于）,lt（小于）,gte（大于等于）,gt（大于）,!（不等于）等关键字来进行注释

示例：只对IE6以上版本生效

 <!--{if gt IE 6}>
<link type="text/css" href="test.css" rel="stylesheet"/>
<!{endif}-->

只在IE7上不生效

 <!--{if  !IE 7}>
<link type="text/css" href="test.css" rel="stylesheet"/>
<!{endif}-->

条件注释能包含的内容不仅是link标签，还可以用如下的样式来进行hack

<!-- {if  IE 6}>
<style type="text/css">
.test{margin-top:20px}
</style>
<!{endif}-->

可以进行一些js的hack,如下面代码所示：

<!--{if IE 6}>
<script type="text/javascript">
   alert('我是 IE 6')
</script>
<!{endif}-->

优点：IE条件注释是微软官方推荐的hack方式，从向前兼容性方面考虑，是最安全的hack方式

缺点：将同一CSS选择符下的样式分散到三个文件中去控制，增加了开发和维护的成本

2.选择符前缀法：

原理：在CSS选择符前面加一些只有特定浏览器才能识别的前缀，从而让某些样式只对特定浏览器生效。例如："*html"前缀只对IE6生效，“*+html”前缀只对IE7生效

1）*：IE浏览器能识别*符号，但其他浏览器诸如：firefox,opera,chrome等不能识别

2）!important：IE7不但能识别*，还能识别!important,而IE6只能识别前者

3）/9 IE8的专属

4）Firefox:-moz-box-shadow

5）Safari:-webkit-box-shadow

6）Opera:-o-box-shadow

示例

<style type="text/css">
    .test{width:80px;}
    *html.test{width:60px;}
    *+html.test{width:70px}
</style>

优点：.test的样式可以集中起来，可维护性强，向后兼容性存在风险

缺点：不能用于内嵌样式上，比如说<div class="test" style="width:60px"></div>无法使用选择符前缀法来hack

3.样式属性前缀法：

原理：在样式的属性名前加前缀，这些前缀只在特定浏览器下才生效。例如："_"只在IE6下生效，"*"在IE6和IE7下生效

示例

<style type="text/css">
   .test{width:80px;*width:70px;_width:60px;}
</style>

优点：相比于选择符前缀法聚合度更高，代码更精简，可维护性更强。可以用于内嵌样式，比如<div class="test" style="width:80px;*width:70px;_width:60px"></div>

缺点：向后兼容性存在风险，