css hack汇部浏览器兼容很轻松

以下内容并不全面，有些内容是自己在网上找的, 有的是收集一段时间, 已无从考证最初的出处, 但是在此还是谢谢他们的无私的提供。

每次要找个东西都得慢慢去翻自己收集的一些东西, 每次都是那么花时间, 再加上有时存放时间久远就忘了当时是存在哪了, 为了方便查询及阅读, 决定把一些 Css Hack 收集起来 …

(一). 区别不同浏览器，CSS hack 写法
：

区别 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 均不支持下划线。于是大家还可以这样来区分 IE6，IE7，FF : background:orange ;* background:green ;_ background:blue ; 注：不管是什么方法，书写的顺序都是 FF 的写在前面，IE7 的写在中间，IE6 的写在最后面。

(二)
.!important

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

(三)
.IE6/IE7 对 FF

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

2. 表达方式：+property:value
测试环境：IE5，IE6，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：
IE5，IE6，IE7 浏览器识别；
FF2.0，Opera 9，Safari 2 浏览器不识别。

结论：我们可以用 ”+” 来实现只有 IE 识别的 CSS Hack。

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

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

3. 用于内联 css
##wrapper  {
  height:20px;   /*For Firefox*/
  *height:25px;  /*For IE7 & IE6*/
  _height:20px;  /*For IE6*/
}

4. IE7 的 hack
>body
html*
*+html

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

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

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

7. 仅 IE7 与 IE5.0 可以识别
*+html  select {…}
当面临需要只针对 IE7 与 IE5.0 做样式的时候就可以采用这个 HACK。

8. 仅 IE7 可以识别
*+html  select {…!important;}
当面临需要只针对 IE7 做样式的时候就可以采用这个 HACK。

9.IE6 及 IE6 以下识别
* html  select {…}
这个地方要特别注意很多博客都写成了是 IE6 的 HACK 其实 IE5.x 同样可以识别这个 HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同 

10. 仅 IE6 不识别，屏蔽 IE6
select {display /* 屏蔽 IE6*/:none;}
这里主要是通过 CSS 注释分开一个属性与值，注释在冒号前。

11. 仅 IE6 与 IE5 不识别，屏蔽 IE6 与 IE5
select/**/ {display /*IE6,IE5 不识别 */:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。不屏蔽 IE5.5

12. 仅 IE5 不识别，屏蔽 IE5
select/*IE5 不识别 */ {…}
这一句是在上一句中去掉了属性区的注释。只有 IE5 不识别，IE5.5 可以识别。

13. 盒模型解决方法
select {width:IE5.x 宽度; voice-family :””}””; voice-family:inherit; width: 正确宽度;}
盒模型的清除方法不是通过!important 来处理的。这点要明确。

14. 盒模型解决方法
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的 HACK 来对父级做一次定义，那么就可以解决这个问题。

15. 只有 Opera 识别
@media all and (min-width: 0px){select {……} }
针对 Opera 浏览器做单独的设定。

16. IE5.x 的过滤器，只有 IE5.x 可见
@media tty {
i{content:””;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */

17. IE5/MAC 的过滤器，一般用不着
@media all and (min-width: 0px){select {……} }
针对 Opera 浏览器做单独的设定。

@media all and (min-width: 0px){select {……} }
针对 Opera 浏览器做单独的设定。