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>
缺点:向后兼容性存在风险,