我在我测试过的任何其他浏览器(IE、Chrome、Opera)中都没有看到这个问题，但每当我从服务器加载页面时，我都会在应用 CSS 之前看到一闪而过的无样式内容.
这甚至会发生在后续页面加载时，所有内容都应该被缓存 - 每次页面加载时，我都会在一瞬间看到未设置样式的内容，然后一切都稳定下来。
还值得注意(也许？)该页面使用@font-face 提取一些 Google 字体。它们存储在一个单独的样式表中，在主要的响应式样式表和媒体查询之后被拉取。
我尝试了一些不同的东西，但没有效果:
- 重新排列 CSS 样式表链接的顺序
- 使用@font-face 删除指向样式表的链接
- 禁用 Firebug？ (在这里的某个地方阅读...)
另一件值得一提的事情是，我在页面的 CSS 中使用了相当多的元素类型 CSS 选择器。这可能会减慢渲染过程吗？
这似乎不太可能，因为在更改窗口尺寸后立即重新呈现页面没有问题 - 响应内容立即呈现良好。
所以这让我相信 CSS 的加载方式存在一些问题。
这是我的 HEAD 代码:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF 在 Firefox 上出了问题？这让我抓狂!
最佳答案
如果你添加一个虚拟 <script>在 <body> 之后标记, Firefox 将显示来自 <head> 的所有 css 之后的页面已加载:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
在 Firefox 网站上有一个关于这个 FOUC(Flash Of Unstyled Content)的官方错误报告:https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
关于css - 仅在 Firefox 中显示无样式内容 (FOUC)？ FF 是慢速渲染器吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21147149/