问题描述

偶然间看到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>元素就可以了。

FOUC - Flash Of Unstyled Content 文档样式闪烁的更多相关文章

  1. FOUC（Flash Of Unstyled Content）文档样式闪烁

    今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...

  2. Flash of Unstyled Content (FOUC)

    在这次的产品发布中,客户发现了一个问题,就是在Firefox浏览器中,页面在加载的时候,出现没有样式的内容一闪而过的现象.其实,在测试过程中,我们也看到了类似的问题,但是并没有意识到这是一个问题,以为 ...

  3. 解决dede编辑器不能保存word文档样式问题

    ckeditor在dede里不能保存样式,试过多种解决办法都还是没有解决.最终将编辑器换成FCK得到解决. 第一步:下载FCK编辑器 下载地址: 链接: http://pan.baidu.com/s/ ...

  4. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  5. C#代码将html样式文件转为Word文档

    首先有个这样的需求,将以下网页内容下载为Word文件. html代码: <div class="modal-body">    <div style=" ...

  6. 将HTML导出生成word文档

    前言: 项目开发中遇到了需要将HTML页面的内容导出为一个word文档,所以有了这边随笔. 当然,项目开发又时间有点紧迫,第一时间想到的是用插件,所以百度了下.下面就介绍两个导出word文档的方法. ...

  7. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  8. HTML5文档的各个组成部分分类

    <!DOCTYPE html><!--声明文档结构类型--> <html lang="zh-cn"><!--声明文档文字区域--> ...

  9. 下载网页中的 pdf 各种姿势，教你如何 carry 各种网页上的 pdf 文档。

    关联词: PDF 下载 FLASH 网页 HTML 报告 内嵌 浏览器 文档 FlexPaperViewer swfobject. 这个需求是最近帮一个妹子处理一下各大高校网站里的 PDF 文档下载, ...

随机推荐

  1. EffectiveJava（28）怎么利用有限制的通配符类型来提升API的灵活性

    有时候,我们需要的灵活性要比不可变类型所能提供的更多.所以针对一些通用性的方法,通常用泛型代替固定的数据类型,特别是当你要将某个方法打包成Jar的时候. 结合之前的例子,我们增加尝试用有限制的通配符类 ...

  2. dijkstra 两点的最短路径 单源 最短路径

    思路以dist数组 来扩充  路径的访问,不断的刷新dist数组 设置一个顶点的集合s,并不断地扩充这个集合,一个顶点属于集合s当且仅当从源点到该点的路径已求出.开始时s中仅有源点,并且调整非s中点的 ...

  3. CUDA编程札记

    const int N = 33 * 1024; const int threadsPerBlock = 256; const int blocksPerGrid = imin( 32, (N+thr ...

  4. css学习笔记 --初学 css代码风格、布局误区

    初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main   主体   container 内容 footer    站底 right.center ...

  5. python将字典内容存入mysql

    1.背景      项目须要,用python实现了将字典内容存入本地的mysql数据库. 比方说有个字典dic={"a":"b","c":& ...

  6. 用rz,sz命令在windows和linux之间传输文件（转）

    转自http://www.linuxmine.com/178.html有很多人没有听说过ZModem协议,更不知道有rz/sz这样方便的工具: 下面一段是从SecureCRT的帮助中copy的: ZM ...

  7. java异常处理Exception

    我看别人的面经中有一道题目就问到了Exception,即java的异常处理的,我曾经也学了java的异常处理,可是我查了下,看了别人的博客关于写的exception异常处理.我发现,自己学的不坚固,仅 ...

  8. spring下载和安装

    下载和安装Spring请按例如以下步骤进行.   (1)登录网站,下载Spring的最新稳定版本号.最新版本号为spring-framework-4.0.建议下载spring-framework-sp ...

  9. Load和CPU利用率是如何算出来的 （转发）

    本文内容遵从CC版权协议, 可以随意转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.penglixun.com/tech/system/how_to_cal ...

  10. Windows 10 KMS 激活方法

    本篇文章由:http://xinpure.com/windows-10-activate-method/ 摘抄: http://www.nruan.com/win-key.html 须知:如果需要在线 ...