不同浏览器的CSS Hacks技术

概述

由于不同的浏览器对于CSS的实现存在差别，为了在所有浏览器中呈现相同的效果，就需要针对特定的浏览器进行特定的处理。

所以这里面关键的技术是CSS过滤器（Css filters），使用CSS过滤器可以甄别出浏览器类型，从而为特定浏览器编写特定的CSS代码。

IE浏览器hack

最简单的方法是使用条件注释，微软的特定做法：

<!--[if IE 9]>
<style type="text/css">
</style>
<![endif]-->
 
< !--[if IE]> Only IE <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

Firefox浏览器hack

对于FF1，2版本，使用body:empty，对于所有的FF版本，使用专有扩展：-moz，结合-document url-prefix()，这是FF扩展构造器用来标识FF浏览器的方法。

/* Firefox 1 - 2 */
body:empty #firefox12
{
color:blue;
}
 
/* Firefox */
@-moz-document url-prefix()
{
#firefox { color:blue; }
}

Safari浏览器hack

Safari和FF一样，使用CSS专有扩展，-webkit。

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { color:blue; }
}

body:first-of-type(1) .safari{
color:#ff0000;
}

-webkit同样被Chrome使用，如果要只定位Safari5+(<6)，可使用如下语句：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari5+ only hack */
    ::i-block-chrome,#safari {
        color: blue;
    }
}

Chrome浏览器hack

如上所提及，Chrome也使用-webkit CSS扩展：

/* Chrome and safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#chrome { color:blue; }
}

Opera浏览器hack

可以使用CSS的否定语句，所有支持-min-device-pixel-ratio但却不是-webkit类型的浏览器目前就是Opera（可能还会有新版本的FF，需要实际测试各个版本）：

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { color:blue; }
}

by iefreer 踏得网跨浏览器编程经验小结。