最近一直在做响应式的项目,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元素中的已经声明的基本字体大小而言的,如果未声明基本字体大小,则是相对于内建字体大小的。