Css hack总结及其最佳用法，告诉你怎么运用hack，无懈可击的解决各个浏览器的样式兼容

　在开发页面的过程中，总会遇到这样那样的不兼容问题，在尽量避免使用一些兼容性很差的元素和样式后，往往还有细节上的不兼容问题，最求完美的前端工程师们就要采用css hack来解决问题了。

　　　　网上各种css hack资料很多，但是很多是有错误，或者不形象的，今天我来细致形象的总结一下他们，及最万无一失的用法~

 

　　  　所有效果均经过各个浏览器测试

　　　　

　　　　首先 ，将要提及的css hack 有：_,*,\0,\9,\0\9,!important

　　　　各个hack的作用：

　　　　　　_ ：用于IE6

　　　　　　　　代码：　

1 background-color:blue;
2 _background-color:red;

复制代码

　　　　　　　　效果：

         

 　　　　　 *和+：用于IE6,IE7

　　　　　　　代码：

1 background-color:blue;
2 *background-color:red;　

复制代码

　　　　

1 background-color:blue;
2 +background-color:red;

复制代码

　　

　　　　　　效果都为：

　　　　

　　　　　　\0:用于IE8，IE9

　　　　　　　　代码：

1 background-color:blue;
2 background-color:red\0;

复制代码

 　　　　　　　效果：

    　　

　　　　　　　　没错，在IE6下 无法识别了~~~

　　　　　　\9:用于 IE6，IE7，IE8，IE9

　　　　　　　　代码：

1 background-color:blue;
2 background-color:red\9;

复制代码

　　　　　　　　效果：

　　　　

　　　　　　\9\0:用于IE9

　　　　　　　　代码：

1 background-color:blue;
2 background-color:red\9\0;

复制代码

　　　　　　　　效果：　

　　　　

　　　　　　　　

　　　　　　没错IE6，又无法识别了~~~~

 　　　　！important:用于所有浏览器--不能算做是hack了，不推荐使用哦

　　　　　　　　代码：

1 div{
2     background-color:red !important;
3 }
4 #test{
5     background-color:blue;
6 }

复制代码

　　　　　　　　效果：

　　　　

　　　　　　　　加上！important 可以完全无视css优先级了~~~

CSS HACK最佳应用方式

　　　　　　　  那么该怎么使用css hack ，达到最好的效果----不影响已经符合标准的浏览器样式呢？

　　　　　　　　对于IE6：

　　　　　　　　　　代码

1 background-color:blue;
2 _background-color:red;

复制代码

　　　　　　　　如果IE7，IE6同时有问题：

　　　　　　　　　　以下2选一：

　　　　　　　　　　代码：

1 background-color:blue;
2  *background-color:red;

复制代码

 

1 background-color:blue;
2  +background-color:red;

复制代码

　　　　　　　　如果只有IE7呢？

　　　　　　　　　　代码：

1 background-color:blue;
2 *background-color:red;
3 _background-color:blue;

复制代码

　　　　　　　　对于IE8：

　　　　　　　　　代码：

1 background-color:blue;
2 background-color:red\9;
3 *background-color:blue;
4 background-color:blue\9\0;

复制代码

　　　　　　  　对于IE9：

　　　　　　　　　代码:　　记得恢复IE6~

1 background-color:blue;
2 background-color:red\9\0;
3 _ background-color:blue;

复制代码

　　　　　　　对于整个IE：

1 background-color:blue;
2 background-color:red\9;

复制代码