为了向你展示这些 css hack 是否正常运作，我新建六个 p 标签，并给每一个 p 标签一个特有的 id。这将向你展示 css hack 的运作情况。
我来自 opera 7.2 - 9.5
我是神奇的 safari
我来自 firefox
我是你爷爷 firefox 1 - 2
我是囧 ie 7
我是脑瘸 ie 6
然后我让这些 p 标签默认都不显示
body p{display: none;}
使用 ie css 条件注释区分 ie 浏览器
最简单的区分 ie 浏览器的方法自然是使用他们的条件注释。 微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍 ie 条件注释了，我想你在搜索引擎能搜索到上万个搜索条目，我这里只要这两个:
使用 css 解析器 hacks 区分 ie
虽说 ie 条件注释十分简单好用，但是如果你想把全部的 css 放到一个文件里的
话，那么你不得不使用别的方法。注意这里的 ie 7 hack将只对 ie7 有效，因为 ie6 根本不知道 > 选择符。同时你也得注意
> 选择符对于其他浏览器同样是无效的。
html > body #ie7 {*display: block;}
body #ie6 {_display: block;}
css hack 区分 firefox
第一个使用了 body:empty 来区分 firefox 1 和 2 。第二个 hack使用了全部 firefox 浏览器的专有扩展 -moz。 -moz 只对 firefox有效，使用这个 hack 大可不必担心其他浏览器的影响。
body:empty #firefox12 {display: block;}
@-moz-document url-prefix() {#firefox { display: block; }}
css hack 区分 safari
safari 的 css hack 与 firefox 的 hack 看起来很像，使用的是 safari浏览器的专有扩展 -webkit 且只对 safari 浏览器有效。
@media screen and (-webkit-min-device-pixel-ratio:0) {#safari { display: block; }}
css hack 区分 opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body #opera { display: block; }}
然后，全部合在一起便是
css browser hacks - 52css.com
body p {
display: none;
}
html:first-child #opera {
display: block;
}
html > body #ie7 {
*display: block;
}
body #ie6 {
_display: block;
}
body:empty #firefox12 {
display: block;
}
@-moz-document url-prefix() {
#firefox {
display: block;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari {
display: block;
}
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body #opera {
display: block;
}
}
我来自 opera 7.2 - 9.5
我是神奇的 safari
我来自 firefox
我是你爷爷 firefox 1 - 2
我是囧 ie 7
我是脑瘸 ie 6
css hack 虽好且方便兼容各浏览器，但是通不过 w3c 验证，所以还得自己权衡是否有必要去使用。