问题描述
偶然间看到FOUC这个单词,在Google里找了半天终于发现了它的含义:Flash Of Unstyled Content。它指的是在某些情况下,IE在加载网页时会出现短暂的CSS样式失效。这种问题出现的条件是比较独特的:
1. 只发生在Windows上的IE(5.0版本以上)
2. 只发生在那些会出现FOUC现象的网页
3. IE的临时文件夹中没有缓存过该页面的CSS文件
现在用IE访问这个页面,就可以看到FOUC发生的时候的情况(当然前提是你之前没有访问过它,否则可能需要清空IE的临时文件夹再访问)。
这个页面的特殊之处在于它的<head>标签里是没有任何的<link>或<script>元素的,它只有这样三行代码:
<title>Flash of Unstyled Content (FOUC)</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
解决方法
解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。