html - 无样式内容的闪现

标签 html css safari fouc

我有一个页面,其中包含从正文数据库中提取的一些内容,在头部我有一个链接到格式化该内容的外部样式表。在 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>

一秒钟左右我看到了这个:

enter image description here

之后: enter image description here

最佳答案

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

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

坏 child !难怪 Safari 在 doctype 声明之前获取 HTML 时会感到困惑。也许它甚至会结束 </html>在它看到您的样式表之前标记?

关于html - 无样式内容的闪现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24099113/

相关文章:

css - 在 Safari 10(?) 中隐藏自动添加的输入(用户)按钮

javascript - 在 JavaScript 中对 iPhone 耳机的下一个按钮(双击)使用react

html - 使用 flex 将元素定位到 div 的底部

javascript - jQuery 上下文菜单不工作

html - 容器DIV高度不适应内容

css - 如何将网页添加到现有网页? (HTML5)

css - 如何响应地加载图像,但将它们用作 css 背景图像而不是 <img>?

php - 表单未在 Chrome 和 Safari 中提交

html - 当我用 <a> 包裹 div 时破坏了 flexbox 布局

javascript - 如何将 CSS 文件导入到 webpack 中?