一个关于 REM 在 IE11 下的 bug

最近一直在做响应式的项目,font-size 的单位选用了 rem。

rem 是根据 html font-size 来计算的。

但是去到了 IE11 的时候失效了。IE10,9 均没有问题,目前还没有找到相关的资料。(当然 Chrome, Firefox, Safari 也是没有问题的。)

另外打开 console 调试一次或选中元素点击一下以后便正常了。要想再看到 bug,需要清缓存,为避免有强力缓存,退出IE重新打开,再查看。

为了解决这个问题,在 body 添加了相关的 css 样式:

body {
  font-size:100%
}

详细代码请戳:http://codepen.io/leechingyin/pen/YqmVVW

由于上述代码还带有 resize 函数,假如 body 元素没有添加 font-size:100% 时。当窗口发生变化时总记录上一次的的 font-size 大小。当调试时,就变得正常了。同样需要清除缓存,退出浏览器才能继续查看 bug。

添加 body 样式后正常,估计是在 IE11 下获取不了动态修改过的 html 的内联样式,body 一直默认浏览器 font-size:14px。所以字体变得很小。将 body{font-size:100%} 继承父元素大小,就可以了。

辣么问题来了~rem不是根据html font-size计算吗?为什么还要设置body呢?这问题有待解决。

ps:字体大小单位rem创建了一个追大小,该字体大小是相当于在HTML或body元素中的已经声明的基本字体大小而言的,如果未声明基本字体大小,则是相对于内建字体大小的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,089评论 0 1
  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,279评论 0 5
  • 作者:HelKyle链接:http://www.w3cplus.com/css/when-to-use-em-vs...
    红叶丶秋鸣阅读 3,290评论 0 3
  • 《澄衷蒙学字课图说》初版于清光绪二十七年(1901年),是有史以来第一部学校编纂的语文课本,也是一部小型的百科全书...
    找到北〇黄河阅读 348评论 0 0