css中em小于1时chrome字体大小和firefox字体大小不一致的问题

  css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少。

       chrome有默认字体大小,默认为12px。设置的字体大小小于12px时,也是按照12px来显示。

        firefox则是按照字体的实际大小显示。

   

       在css中单位长度用的最多的是px、em、rem,这三个的区别,可以看一下:https://www.cnblogs.com/wind-lanyan/p/6978084.html

 

       可以改一下下css样式,使得chrome中显示小于12px的字体。下面内容转自: https://www.cnblogs.com/jiangxiaobo/p/5669976.html    

  可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决,比如下面的代码就可以成功的解决,通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下:

  #chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

  只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。

 

  但是,在chrome更新到27版本之后就不可以用了。

  那此时应该怎么办呢?想一想,还是有办法解决的。

 

  chrome是支持css3的。那么我们是否可以写,

 

  -webkit-transform : scale()  方法来解决呢?

 

  因为ie是支持12号及以下字号的。

  font-size : 12px;

  -webkit-transform : scale(0.84,0.84) ;

  *font-size:10px;

 

  虽然有一点差距。不能精确到小数点后两位。。但是已经很好了。可以凑合用了。

猜你喜欢

转载自www.cnblogs.com/lnlvinso/p/11831912.html