Css hack总结及其最佳用法

winston

CSS 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;



本文链接