Chrome rem bug

遇到一个bug,发现chrome在初始化页面的时候,会错误的渲染rem单位,导致字体过大。

比如:

正常的应该是这样的:

原因是,为了使用rem单位,我们常常将 html 的font-size设置为62.5%,这样会比较方便计算。

通常浏览器的默认字号是16px,这个是chrome的。如此算来,16*62.5%=10px,这样就很方便我们使用rem单位计算各种font-size了。

所以通常现在的css reset部分会有这样的设置:

html {  
font-size: 62.5%; /* 62.5% of 1em (16px) = 10px = 1rem*/ } body { font: 16px/1.618 Arial, Sans-serif; /* Pixel Fallback */ font-size: 1.6rem; /* Font-sizing with rem unit */ } 

但是问题是chrome在某个地方除了个bug,忽略了html的设置。于是在初始化页面的时候,出现了上面字体过大的情况,本来应该渲染成16px的字体,被渲染成了16*1.6=25.6px大小了。但是刷新页面之后就正常了

这个bug从chrome 31版本就出现了,到现在的chrome 42,依然存在——chromium issues 470449

解决方法

有一些简单的解决方法可以规避这个bug:

<script type="text/javascript"> document.body.style.fontSize = '1.6rem'; </script> 

或者将下面的代码放到 head 里面:

<style>  
body { font-size: 1.6rem; } </style> 

当然这些都是很不优雅的方法,基本思路就是让页面repaint一下。

最终问题的解决还是要依赖Google了。这么久不解决这个bug,是要逼我们放弃62.5%改用100%从而提高大家的心算能力的么?

嗯,使用了rem就意味着不考虑IE 8及其之前的IE浏览器了,IE9和IE10要用rem的话,不能用font属性简写。

转载于:https://www.cnblogs.com/hupan508/p/4567228.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值