css hack区分Chrome和Safari(PC版)

2016-01-06阅读(4188)评论(0)牵着狗狗看MM

苏州实时公交查询

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版的是看不到的)

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » css hack区分Chrome和Safari(PC版)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏