Css Hack的定义以及用法
1、什么是CSS hack
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
2、CSS hack解决的问题
问题① CSS hack用来解决有些CSS属性在不同浏览器中显示的效果不一样的问题，如块级元素浮动后margin属性在IE6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在非IE6浏览器中显示的距离是设置的值20px，而在IE6浏览器中实际的显示距离是40px；所以要想margin-left的值在所有浏览器中都显示是20px的宽度，写法应为： display:inline;解决的是IE6双边距的问题
.kw{ margin-left:20px;
_margin-left:20px;
}
问题② IE6浏览器不支持最大最小宽高（min/max-height）
解决方法：为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最大高度和最大宽度，没有必要设置兼容。
常见的hack如下：
|
hack |
示例 |
IE6 |
IE7 |
IE8 |
|
* |
*color |
Yes |
Yes |
No |
|
+ |
+color |
Yes |
Yes |
No |
|
- |
-color |
Yes |
No |
No |
|
_ |
_color |
Yes |
No |
No |
|
# |
#color |
Yes |
Yes |
No |
|
\0 |
color\0 |
No |
No |
Yes |
|
\9 |
color\9 |
Yes |
Yes |
Yes |
|
!important |
color:blue !important; color:green; |
No |
Yes |
Yes |
IE6支持重定义中的!important，例如：
.yanse {color:red!important;}
.yanse {color:#000;}
你将会发现定义了样式class="yanse"时，在IE6下，字体显示为红色（red）。
但不支持同一定义中的!important。例如：
.yanse {color:red!important;
color:#000
}
此时在IE6下不支持，你将会发现定义了样式class="yanse"时，字体显示为黑色（#000）。
3、我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
以颜色为例来为FF、IE8、IE7、IE6编写不用的效果：
.csshack{
color:red; /*firefox等浏览器 显示为红色*/
color:blue\9; /*IE8可识别 覆盖上面规则 显示为蓝色*/
*color:green!important;
/*IE7可识别 覆盖上面规则 显示为绿色*/
*color:#000;/*_color:#000;*/
/*IE6可识别 覆盖上面规则 显示为黑色*/
}
这里的"\9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
IE7、IE8都可识别!important。
如此,就可以完全区分开IE6、IE7、IE8、FireFox了.
CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。所以上面例子的书写顺序为：火狐浏览器的写法写在最前面，IE6的写法要在最后面用于覆盖，其他浏览器写在中间。