CSS Hack 绝对汇总手册

目前，IE6和Firefox是网页用户常用的浏览器。由于不同浏览器对CSS的支持和解析结果不同，同样的CSS代码有时会在不同的浏览器上显现出不同的网页效果。在IE上测试完成的网页，用Firefox打开却可能满篇混乱，表格错位了，文字间距不同了，代码功能也失效了，等等。

微软新出的IE7,8的变节更是让众多专业的Web designer头疼，Web开发者一直在呼吁抛弃不兼容Wbe标准的IE6浏览器，许多大型网站也采取行动屏蔽或要求IE6用户升级到Chrome、IE8或Firefox 3.5，但是微软那个臭不要脸的还一直嚷嚷会始至不渝支持IE6。

各种浏览器对CSS的解析都不一样，当然这并不是CSS的过错(尽管它还不是很完美)，于是我们想尽办法让不同的浏览器下显示的页面效果能一样，于是不停的写CSS。这中间针对各个不同的浏览器去写不同的CSS的过程就叫CSS hack。

下面举例说明怎样书写CSS Hack。

1.这个例子控制网页背景在IE和Firefox中显示不同颜色。虽然实际网页很少这样制作，但这是体验CSS Hack控制能力的一个简单明了的好例子。

 
注：

IE6可识别*，但无法识别!important

IE7可识别*，也可识别!important

Firefox无法识别*，但可识别!important

注：

IE6可识别*和下划线”_”

IE7可识别*，无法识别下划线”_”

Firefox无法识别*或下划线”_”

2.这个例子控制网页页面宽度。使网页在IE中宽度为400px，在Firefox中宽度为700px

注：

IE可识别”+”

Firefox无法识别”+”

3.这个例子控制网页页面高度。使网页在IE6中高度为50px，在IE7或IE6中高度为100px，在Firefox中高度为300px

注：

IE6可识别下划线”_”

IE6和IE7可识别*，IE7无法识别下划线”_”

Firefox无法识别”*或下划线”_”

至此我想大家对CSS Hack Code的使用也有了一定的了解，还有许多的例子，就这不一一列举了。下面就放一些常用的CSS Hack Code出来，以备常用，感谢那些无名Code大侠 ~

IE的if条件Hack

IE的if条件Hack可以让IE区别于其它浏览器和IE个版本之间的浏览器，它利用这样的语法让IE浏览器对其进行解析，属于IE浏览器专有。

 所有的IE可识别
 
 只有IE5.0可以识别
 
 IE5.0包换IE5.5都可以识别
 
 仅IE6可识别
 
 IE6以及IE6以下的IE5.x都可识别
 
 仅IE7可识别

说明 :

gt: greater than，选择条件版本以上版本，不包含条件版本

lt: less than，选择条件版本以下版本，不包含条件版本

gte: greater than or equal，选择条件版本以上版本，包含条件版本

lte : less than or equal，选择条件版本以下版本，包含条件版本

!: everything except what directly follows the \”!\”(选择条件版本以外所有版本，无论高低)

之间内容的具体用法：

可以像这样为IE7配置一个专用CSS文件

or Like This :

也可以像这样直接输入一行CSS代码 

针对不同版本的IE CSS Hack

.font {
 color:black;         --所有浏览器都会显示为黑色
 color: red\9;        --IE6、IE7、IE8会显示红色
 *color: blue;        --IE6、IE7会变为蓝色
 _color: green;       --IE6会变为绿色
}

最后再来总结一下各浏览器的独有特性：

 select/*IE5不识别*/ { display:none;}
 仅IE5不识别

 select { display /*IE6不识别*/:none;}
 仅IE6不识别

 select/**/ { display /*IE6,IE5不识别*/:none;}
 仅IE6与IE5不识别

 *+html  select {…}
 仅IE7与IE5.0可以识别

 *+html select {... !important;}
 仅IE7可以识别

 * html select {…}
 html/**/ >body  select {…}
 _property {...}
 IE6及IE6以下版本可以识别

 * select {…}
 IE8以下IE浏览器都可以识别

 >property  !important;
 IE7、IE8可以识别该规则

屏蔽IE浏览器（也就是IE下不显示）

*:lang(zh) select {font:12px !important;}
仅FF 可见

select:empty {font:12px !important;}
MAC上safari浏览器独有的。

@media all and (min-width: 0px){ select {……} } 

只有Opera识别针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希
望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有
的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件
来链接或是导入需要的补丁样式。

@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5.x的过滤器，只有IE5.x可见

/*\*//*/
@import "ie5mac.css";
/**/
IE5/MAC的过滤器，貌似没用过。。。
 

以上select是选择器,property是属性.
不明白什么是选择器？举个例子吧，CSS的写法：选择器 { 属性: 属性值; }
Like This :

div {color:black;font-size:1ems;}  对照即可，明白了吧~

最后附上一片CSS兼容查看图，由于图太大，就不放上来了： 点击下载

OK,今天就到这里吧，对了注意！！！

Notes:CSS Hack code与W3C标准是完全不相容的，所以，写在最后。。。CSS hacker 慎用~