CSS hack

CSS hack是什么?
简而言之就是:针对不同浏览器编写带有前缀的css就是csshack,就是前段hack.
三种方法

方法一:IE条件注释法

(lte表示小于等于 lt表示小于 gte表示大于等于 gt表示大于 !表示不等于)
IE条件注释是微软官方推荐的方法,向前兼容性方面考虑,它是最安全的hack方式,理论上是最好的选择,但这种方式需要将所有的hack根据浏览器类型集中在相应的文件中

<!--[if IE]>
<link type="text/CSS href="test.css ref ="stylesheet>
<![endif]-->

test.css文件是只加载到IE浏览器会生效,对于非IE浏览器会忽略这条语句.

<!--[if gt IE 6]>
<link type="text/CSS href="test.css ref ="stylesheet>
<![endif]-->

test.css文件是只加载到IE6以上版本时候加载生效.

虽然条件注释最常用于CSS的hack,但他能包含的内容其实不仅仅是link标签,它还可以用这样的形式进行hack(条件注释和style标签)

<!--[if IE 6]>
<style type="text/CSS >
.test{
}
</style>
<![endif]-->

条件注释和script标签

<!--[if IE 6]>
<script type="text/JavaScript">
alert("我是IE 6");
</script>
<![endif]-->

针对不同IE版本分别导入样式

<!--[if IE 6]>
<link type="text/CSS href="ie6.css ref ="stylesheet>
<![endif]-->

<!--[if gt IE 7]>
<link type="text/CSS href="ie7.css ref ="stylesheet>
<![endif]-->

<!--[if gt IE 8]>
<link type="text/CSS href="ie7.css ref ="stylesheet>
<![endif]-->

虽然它的向后兼容性是最好的,但它的缺点也非常明显,将同一css选择服下的样式分散到三个文件中去控制,增加了开发和维护成本.

方法二.选择符前缀法

原理是在css选择符前加一些只有特定浏览器才能识别的前缀 例如"html"只对IE6生效,"+html"只对IE7生效,这就不能保证IE9和IE10不识别,在向后兼容性有风险( 只能在CSS样式文件或内嵌式的style中这样写，不能用于行内式)

方法三.样式属性前缀法

原理是在样式的属性名前加前缀,这些前缀旨在特定的浏览器生效( 行内 style=＂width:200px＂ IE6
style="*width:200px" IE7 或者在CSS文件中写这样的样式，也是可以的)
如""只在IE6生效
"*"只在IE7生效

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

样式属性前缀法相比起选择符前缀法,聚合程度更高,代码更精简,可维护性很强,和选择符前缀法相同,向后兼容性有风险