无样式内容的 Flash答案

【问题标题】：Flash of unstyled content无样式内容的 Flash
【发布时间】：2014-07-28 17:51:24
【问题描述】：

我有一个页面，其中包含从正文中的数据库中提取的一些内容，在头部我有一个链接到格式化该内容的外部样式表。在 Safari 上（在 Chrome 或 Firefox 上似乎没有）我得到了一个可爱的无样式内容的闪光。

我宁愿对此进行非javascript修复，有没有办法定位外部css工作表链接，以便在php脚本在正文中运行之前应用它？ - 我认为它会自动执行此操作，但显然不是在 safari 中，有什么想法吗？

<?php
require_once "../config/article_functions.php";
include "../widgets/topborder.html";
include "../widgets/banner.php";
include "../widgets/navbar.html";
?>

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://example.org/widgets/article.css">

<style type="text/css">
a:link {color: inherit;}      /* unvisited link */
a:visited {color: inherit;}  /* visited link */
a:hover {color: inherit;}  /* mouse over link */
a:active {color: inherit;}  /* selected link */

body, html {
    margin: 0;
    padding: 0;
    height:900px;
}

#container {
    width:990px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
}

#news_container {
    width:740px;
}

</style>
<title> TODO </title>

</head>
<body>
<div id="container">
    <?php include "../widgets/sidepanel.html"; ?>
    <div id = "news_container">
        <?php
            $uri = explode('/', $_GET['$url']);
            get_selected_news($uri[0]);
        ?>
    </div>
</div>
</body>
</html>

一秒钟左右，我看到了这个：

然后：

【问题讨论】：

这在任何浏览器中都不是问题，PHP 在服务器端执行，除非您使用 ajax，否则它会在页面加载到浏览器中时出现，并且应该立即应用样式.
@adeneo - en.wikipedia.org/wiki/Flash_of_unstyled_content - 不应该，但确实如此，我肯定会在应用 css 的屏幕 b4 上看到无样式的内容
我知道 fouc 是什么，并且没有快速的 javascript 修复这个问题，也与 PHP 没有任何关系，问题通常是开发人员所做的，而 Safari 以拥有在样式表加载之前访问某些窗口属性时出现问题等，因此您可能在样式之前加载脚本或执行其他导致问题的操作，解决此问题的唯一方法是解决您做错的任何事情，而不是添加更多代码。
Safari 博客上的一篇旧文章详细介绍了 fouc 的工作原理等 -> webkit.org/blog/66/the-fouc-problem
嗯，我认为您在 doctype 声明之前包含至少两个 html 文件（topborder 和 navbar）是否正确？这看起来真的是格式错误的 HTML！也许向我们展示 PHP 引擎的输出，即浏览器看到的响应。

标签： html css safari fouc

【解决方案1】：

<?php
include "../widgets/topborder.html";
include "../widgets/navbar.html";
?>

<!DOCTYPE html>
<html>
<head>
…

坏孩子！难怪 Safari 在 doctype 声明之前获取 HTML 时会感到困惑。也许它甚至在看到你的样式表之前得到一个结束 </html> 标记？

【讨论】：