Chrome rem bug
2015-06-10 20:42
302 查看
遇到一个bug,发现chrome在初始化页面的时候,会错误的渲染rem单位,导致字体过大。
比如:
![](http://www.qianduan.net/content/images/2015/05/incorrect.jpg)
正常的应该是这样的:
![](http://www.qianduan.net/content/images/2015/05/correct.jpg)
原因是,为了使用rem单位,我们常常将
![](http://www.qianduan.net/content/images/2015/05/font-size.jpg)
通常浏览器的默认字号是16px,这个是chrome的。如此算来,
所以通常现在的css reset部分会有这样的设置:
但是问题是chrome在某个地方除了个bug,忽略了html的设置。于是在初始化页面的时候,出现了上面字体过大的情况,本来应该渲染成16px的字体,被渲染成了
这个bug从chrome 31版本就出现了,到现在的chrome 42,依然存在——chromium issues 470449。
或者将下面的代码放到
当然这些都是很不优雅的方法,基本思路就是让页面repaint一下。
最终问题的解决还是要依赖Google了。这么久不解决这个bug,是要逼我们放弃62.5%改用100%从而提高大家的心算能力的么?
嗯,使用了rem就意味着不考虑IE 8及其之前的IE浏览器了,IE9和IE10要用rem的话,不能用font属性简写。
比如:
![](http://www.qianduan.net/content/images/2015/05/incorrect.jpg)
正常的应该是这样的:
![](http://www.qianduan.net/content/images/2015/05/correct.jpg)
原因是,为了使用rem单位,我们常常将
html的
font-size设置为62.5%,这样会比较方便计算。
![](http://www.qianduan.net/content/images/2015/05/font-size.jpg)
通常浏览器的默认字号是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属性简写。
相关文章推荐
- 高程拾取器App上线
- 基于FPGA的双口RAM设计方法
- HDU 4998
- Android IllegalStateException: Fragment not attached to Activity
- 模式识别:k-均值聚类算法的研究与实现
- MySQL 数据(数据库)迁移
- HDU 1013 Digital Roots
- java发送http的get、post请求
- 顺时针打印矩阵
- Java正则表达式
- Flex 绘制圆形并填充图片
- HDU 1081 To The Max--DP--(最大子矩阵)
- 《C++ primer》第五版 第七章 笔记
- HTML常用标签之DOCTYPE
- 8.超级彩图(storyboard和代码组合搭建界面)
- 前台限制ajax重复提交(利用jquery ajaxPrefilter实现)
- PHP中的 抽象类(abstract class)和 接口(interface)
- 各种排序代码集合笔记
- Python面试题集答案(2)
- java指纹识别+谷歌图片识别技术