safari only css hack,css hack区分Chrome和Safari(PC版)

Chrome和Safari都是webkit内核，但是有时候用起来却很头疼。

比如，Chrome现在版本最小支持的字体大小是12px,然而Safari却不是。

比如有一个字体需要设置9px，

常规写法可以怎么写

[css].myfont{

display: block;

font-size: 9px;

/* chrome下使用transform来缩放*/

-webkit-transform:scale(0.75);

}

[/css]

上面这样写，除了Safari，都是显示9px，Chrome下最小字体大小是12px,所以使用transform来缩放字体，那么，问题来了，在Safari显示的是在9px的基础上再进行缩放。

解决方法：

[css].myfont{

display: block;

font-size: 9px;

/* chrome下使用transform来缩放*/

-webkit-transform:scale(0.75);

}

/*Safari下不进行缩放，也就是区分Chrome和Safari的CSS HACK*/

::i-block-chrome,.myfont{

-webkit-transform:scale(1);

}

[/css]

为了方便演示效果，DEMO只做颜色上的变化(Safari效果只在PC版上看的到，MAC版的是看不到的)