请教前端达人们一个简单的 CSS 问题

[ini]

出问题的是这个页面： http://kelvinh.github.io

问题描述：在Chrome下，打开页面的一瞬间，字体很大，然后等页面加载完成之后，字体回归到正常大小。

如果第一次没注意，可以后面用Ctrl + F5强制刷新，即可看到现象。

个人感觉是CSS的问题，烦请各位前端高手帮忙看看，非常感谢~~

[AWSAM]

css 小白。。

html {
font-size: 62.5%;
}

是因为html作为跟节点用%的缘故么。。

[chairuosen]

我觉得是css属性可能会在标签读取完全的情况下才渲染，然后你页脚加的js是同步方式阻塞了页面读取，这样读到这时候htmlbody还没关门呢，其他字体不知道根字号是多少，就按100%算了。js完成后才按62.5算。证据是在js打个断点，字号就一直那么大了。解决办法是给js套个window.onload或者用异步加载js

[kfll]

...是因为楼主有个好名字

[hewigovens]

打开如果不操作的话一直是很大的字体

[sneezry]

确实只有Chrome是不一样的。首先说一下，问题出在root element font size。楼主看下，字体变大了，是不是变大的字体是以16px为基底的。没错，html已经指定了62.5%的字号了，也就是12*62.5%=10px，但是为什么Chrome还是以16px为基底呢？再观察一下，网站的标题和下面的首页两个字大小是正常的吧？也就是h1、h2和h3是正常的，而剩下的就不正常了，那么问题到底出在哪里呢？就是@media。出问题的DOM都是在@media定义的（先吐槽小楼主css中@media逻辑写得好混乱）。所以总结一下，这个问题我猜是Chrome的BUG，@media中root element的字号没有正确解析出来而使用了默认的16px，而@media外的样式则成功解析出了html的字号为62.5%。现在rem还是有很多问题的，建议和em及px配合使用（btw，lz连margin和width都用rem做单位简直是暴力至极了）

[sneezry]

这里有一个类似的BUG报告
https://code.google.com/p/chromium/issues/detail?id=330410&can=1&q=rem&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

[ini]

@AWSAM
@chairuosen
@kfll
@hewigovens
@sneezry

谢谢各位的热心回复，感谢已送出。确实如各位所说，和html结点的字体定义以及rem的使用有关，应该是触发了Chrome的bug :-D

@sneezry 大哥，你太diao了，你这么diao，你家里知道么？ :-p