Css Hack汇总.docx

CssHack汇总
前言
每次要找个东西都得慢慢去翻自己收集的一些东西,每次都是那么花时间,再加上有时存放时间久远就忘了当时是存在哪了,为了方便查询及阅读,决定把一些CssHack收集起来...
1.区别不同浏览器，CSShack写法：
区别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;
IE6IE7FF*√√×!important×√√

另外再补充一个，下划线"_",
IE6支持下划线，IE7和FF均不支持下划线。

于是大家还可以这样来区分IE6，IE7，FF
:background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是FF的写在前面，IE7的写在中间，IE6的写在最后面。

2.!important
随着IE7对!important的支持,!important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<style>
#wrapper
{
width:100px!important;/*IE7+FF*/
width:80px;/*IE6*/
}
</style>

3.IE6/IE7对FF
1.*+html与*html是IE特有的标签,firefox暂不支持.
而*+html又为IE7特有标签.

<style>
#wrapper
{
#wrapper{width:120px;}/*FireFox*/
*html#wrapper{width:80px;}/*ie6fixed*/
*+html#wrapper{width:60px;}/*ie7fixed,注意顺序*/
}
</style>

2.表达方式：+property:value

测试环境：IE5，IE6，IE7，FF1.5，FF2.0，Opera9，Safari2
测试结果：
IE5，IE6，IE7浏览器识别；
FF2.0，Opera9，Safari2浏览器不识别。

结论：我们可以用"+"来实现只有IE识别的CSSHack。

比如我们要实现在IE中500px的宽度，而在其他浏览器480px的宽度，就可以通过"+"Hack来完成，如下：

#hack{
width:500px;
+width:480px;/*onlyIE*/
}

3.用于内联css

##wrapper{
height:20px;/*ForFirefox*/
*height:25px;/*ForIE7&IE6*/
_height:20px;/*ForIE6*/
}

5.IE7的hack

>body
html*
*+html

这三种写法，其中前两种都是不合法的CSS写法，在标准兼容浏览器中被被忽略，但是IE7却不这么认为。对于>body，它会将缺失的选择符用全局选择符*代替，也就是将其处理成了*>body，而且不光对于>选择符，+,~选择符中这个现象也存在。对于html*，由于html和*之间没有空格，所以也是一种CSS语法错误，但IE7不会忽略，而是错误地认为这里有一个空格。对于第三种*+html，IE7认为html前面的DTD声明也是一个元素，所以html会被选中，这三种方法中只有这一种方法是合法的CSS写法，也就是说可以通过校验器的验证，因此也是作者推荐的hack用法。

6.IE6不能识别

html/**/>body#box{color:red;}IE6字体不会变成红色

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

*:lang(zh)select{font:12px!important;}
/*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty{font:12px!important;}
/*safari可见*/这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

8.仅IE7与IE5.0可以识别

*+htmlselect{…}
当面临需要只针对IE7与IE5.0做样