为什么我的 CSS 在使用 xampp 的本地主机中无法正常工作，但在本地或从 Netlify 站点打开相同文件时工作正常？

Question

所以我一直在大学网站上工作，我开始学习 PHP 但为此我安装了 xampp 并尝试从本地主机访问该网站。

据我了解，HTML 文件和图像，甚至 CSS 中定义的（某些）图像正在加载，但整个 CSS 文件没有加载，例如 float 和 flexbox 和一些填充、边框和不同类型的定位没有按预期工作。它肯定会找到 CSS 文件，所以我认为 <header>.

中的 <link> 标签没有问题

HTML header:

<head>
  <meta charset="utf-8">
  <title>Home - akiro</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

Answer 1

这只是因为 Xampp 浏览器缓存了您的 CSS 文件。这意味着如果对文件进行更改，浏览器仍将访问缓存文件而不是新文件。一个简单的技巧是从本地服务器打开 CSS 并刷新页面，以便使用新的 CSS。例如打开 localhost:8080/project/css/style.css 并刷新该页面

Answer 2

它没有按预期工作的原因有很多种：

如Doc-Han所述； css 我的旧版本已被缓存。
您正在从相对路径加载 css：style.css。这意味着 css 应该与 html 文件位于同一文件夹中。也许 css 应该从 '/style.css' 或 '/resources/style.css' 或其他位置加载
也许 css 包含一些简单的拼写错误，因此您应用的是 'flaot' 而不是 'float'

通过浏览器开发人员工具检查您的网页。打开控制台。检查是否有任何错误。检查 css 是否加载，同时检查是否加载了正确的版本。检查样式规则是否应用于正确的 html 元素或根本没有应用。如果是 Chrome 中的缓存问题，您可以打开开发工具，打开应用程序选项卡，单击 'clear storage' 菜单项并清除站点数据。现在重新加载页面。在网络选项卡中，您还可以单击 'disable cache' 并重新加载页面。

Answer 3

正如 Doc-Han 所述，这很可能是缓存问题，我认为我们大多数人运行在 UI 开发过程中都遇到过这个问题。

您可以做的一件事是在隐身模式下打开并进行调试 window，它不会缓存文件，如果确实发生会话缓存，可以重新打开以加载新集。

或者，出于这个原因，一些代码编辑器有一个 in-built 网络服务器。我已经使用 Adobe 支架几年了，我很喜欢它。它使用内部节点服务器为页面提供服务，因此，他们将其设置为实时代码更新。代码的更改会实时反映出来，我发现这对我处理 UI 开发流程有很大帮助，避免了这样的问题，每次我进行更改时只节省了 3-5 秒的刷新时间（这增加了当您进行 5000 次更改时，我某些其他编辑也提供类似的东西。

Answer 4

只需清除浏览器缓存即可！

为什么我的 CSS 在使用 xampp 的本地主机中无法正常工作，但在本地或从 Netlify 站点打开相同文件时工作正常？

Why is my CSS not working properly in localhost using xampp but working fine when same files are opened locally or from a Netlify site?

html

css

xampp