Question

现在这只是一个简单的页面，但是背景颜色和图像在上载的站点上显示不正确，但是在本地文件中可以正常显示。此外，使用和不使用www前缀时，网站看起来都不同。

[编辑-我看到的是一个空白的空白页，或者在页面中间出现一个带有压扁徽标的页面。我已经尝试过在移动设备和台式机上使用chrome，edge以及是否启用隐身模式。]

http://www.swedge.design/

https://imgur.com/aqTTwPP [通过www.swed的外观...]

以及本地外观

我已经使用W3标记验证服务对其进行了检查，并更正了这些错误。我也无法在控制台上看到任何错误，也没有其他人进行检查，并且也在我的手机上进行了检查，因此这不可能是缓存问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> swedge.</title>
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" href="/favicon.ico">
        <meta charset="UTF-8">
    </head>
    <body>
        <div><img src ="swedge.png" alt = "">
        </div>
    </body>
</html>

CSS 
body
{
    background-color: #333333;
}

div {
    top:0;
    left:0;
}

div img {
    position:fixed;
    top:0;
    left:0;
    height: 200 px;
    width: 200px;
}

我进行了搜索，但是所有内容似乎都指向代码中的错误或需要清除的缓存。

Answer 1

这里有另外两个人提到：对我们来说，在线版本就像您的截图一样。这对您来说是个好消息，但是为什么它对您却对我们不起作用？

这是Web开发中常见的问题，是由缓存引起的。您最有可能在部署最终版本之前打开了网页。您的浏览器或CDN服务器缓存了旧文件，并且在最终部署后重新加载页面时，这些旧文件破坏了网页，因为该页面现在是一半新，一半旧。

检查缓存问题的最简单方法是在隐身窗口/标签页中打开网页。隐身模式不共享缓存，因此就好像您是第一次打开网页一样。关闭并打开新的隐身窗口后，缓存将再次重置。

在Chrome中，您还可以在开发人员工具打开时左键单击重新加载图标，然后选择“强制重新加载”以手动使所有缓存无效并重新加载所有内容。

请不要因为当CDN服务器引起缓存问题时这两种方法都不起作用，因为您的浏览器将再次从CDN接收过期的文件。在这种情况下，您需要等待CDN从缓存中删除文件。

您可以使用缓存控制标头（浏览器和CDN）控制此行为。较短的缓存时间或没有缓存时间都不会减少此问题，但会增加服务器的负载。

编辑：您在另一条评论中提到，您已经尝试过隐身模式。这意味着问题很可能是CDN引起的。您可以检查HTTP响应标头中的缓存指令。

与托管时相比，托管时我的网页看上去完全不同

1 个答案: