如何调查 Firefox 中的“无法加载样式表”消息？
Posted
技术标签:
【中文标题】如何调查 Firefox 中的“无法加载样式表”消息？【英文标题】：How do I investigate a "style sheet could not be loaded" message in Firefox? 【发布时间】：2016-08-27 14:50:30 【问题描述】：此消息显示为页面内容下方和开发人员工具上方的红色条。如何找出浏览器引用的文件？我在 Linux Mint 17.3 上运行 46.0 版。
更新
如果我在 Firefox 中查看开发人员工具的控制台，它会显示所有 css 文件并针对每个文件显示“HTTP/1.1 200 OK”。
另一个更新
这个错误栏来来去去，它与特定页面不一致。
【问题讨论】：
Chrome 或 IE 等其他浏览器是否会出现这种情况？ 我不使用这两种浏览器。 我已经在下面为您更新了我的答案：您更新的问题。 您是否建议，如果您在一个浏览器中找不到错误，请尝试使用另一个浏览器？ 不，我是说你不能声称这是一个浏览器错误，直到你可以证明这个“错误”/“功能”没有 出现在其他浏览器中。否则问题很容易是您的编码或某些中间件问题。 【参考方案1】：这可能是一个非常特殊的边缘情况，但我遇到了完全相同的错误，但没有说明 Firefox 抱怨的是哪个样式表。事实证明，这是我使用的广告拦截器。当我禁用广告拦截器并重新加载我的页面时，错误消失了。
【讨论】：
解决了！谢谢！！【参考方案2】：这种情况几乎总是在 CSS 被 gzip 压缩时发生，但服务器返回 not 压缩资源的 Content-Length。在将 mod_deflate 与 mod_fastcgi 一起使用时看到了这种情况。这是服务器端错误，而不是 Firefox。
【讨论】：
值得用 mod_fcgid 替换 mod_fastcgi 吗？我现在只在运行 localhost，所以如果它没有害处……这有关系吗？ @tyebillion 我确实遇到了与mod_fcgid 相同的问题。所以我认为答案是否定的。
但我只是打开链接到样式表的index.html，没有服务器或客户端主机只涉及纯 html 和 css，我仍然收到此错误。我该怎么办？
此答案无效，因为在禁用所有服务器端压缩的情况下仍会出现此问题【参考方案3】：
更新通知：
Firebug 已过时，您想使用 Firefox Developer Edition 而不是 firebug，它内置了 Firebug 类型的诊断和工具。
Get Firebug，或以其他方式查看页面源代码（在 Firefox 上右键单击它并选择查看源代码）并单击 HTML 页面的 <head> 部分中引用的每个 .css 样式表。其中一项或多项将返回错误 404 或其他错误。
每个 CSS 工作表都位于 HTML 头部的 <link> 元素中。
示例：
查看本页源码会给出一堆代码，在<head>部分是<link>：
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/***/all.css?v=8c7d44a438e6">
...
</head>
这表明链接元素中有一个样式表，如果您单击所有这些（可能有多个）并找到给您特定错误的那个，那么对于您的页面/站点。
更新：
（更新）如果我在 Firefox 中查看开发人员工具的控制台，它会显示所有 css 文件并针对每个文件显示“HTTP/1.1 200 OK”。
因此，您应该在中查看每个 CSS 和相关文档，以查看哪个文档链接到无法访问的资源。
【讨论】：
我不明白，为什么它没有在 Firefox 的控制台或网络面板中列出？我的意思是它是 Firefox 中继错误。 （叹气），get Firebug。使用萤火虫。它告诉你什么？执行我的回答中建议的要点，例如在 in 每个 CSS 文件中查找外部内容，然后检查是否可以通过浏览器窗口直接打开该内容。 @tyebillion 我在其他地方看不到错误，不是在 Firefox 开发人员工具、Firebug 或 Chrome 开发人员工具中。由于该错误现在消失了，我认为这是 Firefox 尚未清除的旧错误。也许关闭开发者工具面板并重新打开已经清除了错误。 Firebug 已过时。它在Firebug home page 上这么说。所以这个答案也是。 @Martin 我承认答案在编写时很有帮助。根据我的经验，Firebug 越来越多，因为它不再维护，我认为应该更新答案以更多地强调其他解决方案，即查看源代码或查看开发工具控制台。【参考方案4】：style sheet could not be loaded 的另一个原因是“主动混合内容”与 HTTPS 结合使用。 IE。如果您的 HTML 代码通过 HTTPS 加载，但引用了通过 HTTP 传递的 CSS，Firefox 将阻止 CSS 文件。阻止将导致 Web 控制台中的解释性条目。请参阅https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content 了解更多信息。
如果对 CSS 文件的请求通过带有重定向的 HTTPS 得到响应，并且重定向 URL 使用 HTTP，也会发生阻塞。 Google Chromium 还将阻止通过 HTTP 的活动混合内容，并在其 javascript 控制台中进行条目。
【讨论】：
【参考方案5】：我从这个 stackexchange 页面遇到了这个错误，在 firebug 控制台中得到了红线。它指向链接https://cdn.sstatic.net/Sites/***/all.css?v=743e70f26396，所以我检查了页面源副本/将链接粘贴到新选项卡中，然后按Enter。 Firefox 尖叫安全问题证书错误，所以我只是添加了一个异常并加载了 CSS。此错误未出现在 Chrome 或 IE 中。
轻松修复。
【讨论】：
您的链接已损坏以上是关于如何调查 Firefox 中的“无法加载样式表”消息？的主要内容，如果未能解决你的问题，请参考以下文章
前端周报：2019年 Serverless 使用调查发布，需求将持续增长；Firefox 73引入全局缩放功能，可应用于所有网站
马斯克计划未来数月裁掉推特75%员工；律师调查GitHub Copilot版权侵犯问题；Firefox 106 发布|极客头条