今天被在修改CSS的时候，突然碰到要单独Hack IE8的。当然，用注释非常方便，只要添加相应的注释就可以解决。但问题是，为了一句CSS写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。结论如下：
?
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}
?
?
当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示 ：
演示的CSS代码如下：
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown\9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}
?
?
哈，事实就这么简单。你看到的是那一句话呢？如果你多个浏览器都测试了，就会看到，显示的文字和颜色是不同的。为什么？看看我的HTML中这个段落是这样写的：
<p class="ie"> <span style="display:block;display:none\9;">嘿嘿，小子竟然也用Firefox，蓝色文字。</span> <!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]--> <!--[if IE 7]>你，IE7，红色文字！<![endif]--> <!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]--> </p>?
?
对，就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧，一看就知道那个对那个了。
源代码下载：ie-firefox-hack.zip
?
?
?
Hack 的顺序
使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法
说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.
#bgcolor {
background:red !important; /* Firefox 等其他浏览器 */
background:blue; /* IE6 */
}
*+html #bgcolor {
background:green !important; /* IE7 */
}
? |
IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).
?
?
?
?
?
?
?
?
?
?
?
IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
时间：2010-04-22 作者：东方皓 分类：常见问题 评论：2
今日整理网站的 CSS 的时候发现我的网站在 Firefox下面出现了变形的情况,这个时候我急啊.
我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSS hack十分了解了，现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣，可苦了我们这些Web前端开发人员了。
我在这里稍微整理了一下前面了解的各浏览器的CSS hack，打包奉献一下，哈哈。
各浏览器CSS hack兼容表：
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
| !important | Y | Y | ||||
| _ | Y | |||||
| * | Y | Y | ||||
| *+ | Y | |||||
| \9 | Y | Y | Y | |||
| \0 | Y |
