由于不同的浏览器，比如IE6、IE7、Firefox等，对CSS的解析不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。我在写WordPress天气预报插件的时候就碰见了一个CSS hack的问题：在IE6下不能显示正常。本来一个很好的WordPress天气预报插件就因为IE6给推迟了发布时间。所以对于前端开发人员CSS兼容性是个比较棘手的问题，当然对于不同浏览器也有不同的CSS hack的方法，此处本人就整理了一些常用到CSS hack方法，分享给大家，希望对大家有用。
CSS Hack浏览器的顺序
对于不同浏览器的CSS hack是有顺序区分的，一般的书写hack的顺序是：Firefox -> IE7 -> IE6 -> 其他，
当然推荐大家使用Firefox+Firebug来进行调试，注意书写的时候要尽量标准，记住封口，很多时候不封口在FF，IE7下显示正常，可是在IE6下就全部乱了~
CSS Hack整理汇总
这些方法相信很多人已经很熟悉了：比如 IE6能识别下划线”_“和星号” * “，IE7能识别星号” * “，但不能识别下划线”_“，而firefox两个都不能认识。
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
另外再补充一个:下划线”_”, IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
除了上面常用到的方法，下面的代码也有CSS hack的效果：
#bgcolor {
background:red !important; /* Firefox 等其他浏览器 */
background:blue; /* IE6 */
}
*+html #bgcolor {
background:green !important; /* IE7 */
}
E6 不认 !important, 也不认 +html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 **+html, 优先度: (*+html + !important) > !important > +html**. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
使用if IE注释，让不同的CSS文件也能Hack
我们可以写两个文件，一个是针对于全部浏览器的不需要CSS hack的css文件，假如是all.css，一个是针对某一特例的浏览器，如IE6，假设为IE6.css
我们可以通过下面的代码来给IE6浏览器引入IE6.css这个文件，而对于其他的浏览器（如IE7）却不引入这个IE6.css，这样子就减少了IE7浏览器的请求次。
<!–[if IE]>
<link rel=”stylesheet” href=”style_ie.css” type=”text/css” />
<![endif]–>`
关于if IE注释的详细用法，请参详《使用if IE hack注释解决CSS以及JS的兼容问题》
兼容所有浏览器的透明效果
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/
-khtml-opacity: 0.5;
opacity: 0.5;
}