为啥我的 CSS 在使用 xampp 的 localhost 中不能正常工作，但在本地或从 Netlify 站点打开相同的文件时工作正常？
Posted
技术标签:
【中文标题】为啥我的 CSS 在使用 xampp 的 localhost 中不能正常工作，但在本地或从 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?为什么我的 CSS 在使用 xampp 的 localhost 中不能正常工作，但在本地或从 Netlify 站点打开相同的文件时工作正常？ 【发布时间】：2019-11-29 02:38:14 【问题描述】：所以我一直在研究一个大学网站，我开始学习 php，但为此我安装了 xampp 并尝试从 localhost 访问该网站。
据我了解，html 文件和图像，甚至在 CSS 中定义的（某些）图像都在加载，但整个 CSS 文件没有加载，例如浮动和 flexbox，并且一些填充、边框和不同类型的定位不起作用如预期。它肯定会找到 CSS 文件，所以我认为 <header> 中的 <link> 标记中没有问题。
HTML 标头：
<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>
【问题讨论】：
【参考方案1】：只需清除浏览器的缓存即可！
【讨论】：
嘿，欢迎来到堆栈溢出。你的答案很可能是正确的，但你写的东西和别人已经写的完全一样。另外，如果您的回答，请提供有关如何执行此操作的指南。例如，在这种情况下，您可以告诉他如何将页眉设置为不被缓存的页面。在一张纸条上，Just clear your browser's caches and done! 可能是一个完全有效的评论，但没有答案。无论如何，很高兴您尝试帮助人们，我鼓励您继续这样做，并提供良好而直接的答案。 :)
@Elias 谢谢。很高兴见到对新人友善的人。这些天来很少见，我觉得我的感激被视为表达
@JLGriffin 谢谢你。很高兴听到它受到赞赏:)【参考方案2】：
正如 Doc-Han 所说，这很可能是缓存，我认为这是我们大多数人在 UI 开发过程中遇到的问题。
您可以做一件事来解决这个问题，即在隐身窗口中打开并进行调试，该窗口不会缓存文件，并且可以在会话缓存发生时重新打开以加载新集。
出于这个原因，另外一些代码编辑器有一个内置的网络服务器。几年来我一直在使用 Adobe 括号，并且喜欢它。它使用内部节点服务器为页面提供服务，因此，他们将其设置为实时代码更新。对代码的更改是实时反映的，我发现这对我处理 UI 开发流程有很大帮助，避免了这样的问题，并且每次我进行更改时只需节省 3-5 秒的刷新时间（当你制作时会加起来） 5000 个更改 我确定其他编辑器也提供类似的内容。
【讨论】：
【参考方案3】：很多可能为什么它没有按预期工作：
正如韩医生所说；我已经缓存了旧版本的 css。 您正在从相对路径加载 css：style.css。这意味着 css 应该与 html 文件位于同一文件夹中。也许应该从“/style.css”或“/resources/style.css”或其他位置加载css 也许 css 包含一些简单的错字，所以您使用的是“flaot”而不是“float”通过您的浏览器开发工具检查您的页面。打开控制台。检查是否有任何错误。检查css是否加载，同时检查是否加载了正确的版本。检查样式规则是否应用于正确的 html 元素或完全应用。 如果这是 Chrome 中的缓存问题，您可以打开开发工具，打开应用程序选项卡，单击“清除存储”菜单项并清除站点数据。现在重新加载页面。在网络选项卡中，您还可以单击“禁用缓存”并重新加载页面。
【讨论】：
【参考方案4】：这只是因为使用 Xampp 浏览器会缓存您的 CSS 文件。这意味着如果对文件进行更改，浏览器仍将访问缓存文件而不是新文件。一个简单的技巧是从本地服务器打开 CSS 并刷新页面，以便使用新的 CSS。
示例打开 localhost:8080/project/css/style.css 并刷新该页面
【讨论】：
以上是关于为啥我的 CSS 在使用 xampp 的 localhost 中不能正常工作，但在本地或从 Netlify 站点打开相同的文件时工作正常？的主要内容，如果未能解决你的问题，请参考以下文章