CSS 如何调查 Firefox 中的“无法加载样式表”消息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36989220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I investigate a "style sheet could not be loaded" message in Firefox?
提问by gornvix
How do I investigate a "style sheet could not be loaded" message in Firefox? This message appears as a red bar below the page contents and above the developer tools. How do I find out what file the browser is referring to? I'm running version 46.0 on Linux Mint 17.3.
如何调查 Firefox 中的“无法加载样式表”消息？此消息显示为页面内容下方和开发人员工具上方的红色条。如何找出浏览器所指的文件？我在 Linux Mint 17.3 上运行 46.0 版。
Update
更新
If I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
如果我查看 Firefox 中开发人员工具的控制台，它会显示所有 css 文件并针对每个文件显示“HTTP/1.1 200 OK”。
Another Update
另一个更新
This error bar comes and goes, it is not consistent for a particular page.
这个错误栏来来去去，它与特定页面不一致。
采纳答案by Bogdan Ku?tan
This happens almost always when CSS is gziped, but server returns Content-Length of notcompressed resource. Seen this happen when using mod_deflate with mod_fastcgi. This is server side bug, not firefox.
当 CSS 被 gzip 压缩时，这几乎总是发生，但服务器返回未压缩资源的Content-Length 。当使用 mod_deflate 和 mod_fastcgi 时会发生这种情况。这是服务器端错误，而不是 Firefox。
回答by Mike Stoddart
This may be a very specific edge case, but I had this exact same error with no indication as to which style sheet Firefox was complaining about. It turns out that it was the Ad Blocker that I was using. When I disabled the ad blocker and reloaded my page, the error went away.
这可能是一个非常特殊的边缘情况，但我遇到了完全相同的错误，但没有说明 Firefox 抱怨的是哪个样式表。事实证明，这是我使用的广告拦截器。当我禁用广告拦截器并重新加载我的页面时，错误消失了。
回答by Martin
Update Notice:
Firebug is out of date, instead of firebug you want to be using Firefox Developer Editionwhich has Firebug-type diagnostics and tools built in.
更新通知：
Firebug 已过时，您希望使用内置 Firebug 类型诊断和工具的Firefox Developer Edition，而不是 firebug 。
Get Firebug, or otherwise view the page source code (right click on it on Firefox and choose View Source) and click through on each .css stylesheet as referenced in the <head>section of the HTML page. One or more of these will return an Error 404 or some other error.
获取 Firebug，或以其他方式查看页面源代码（在 Firefox 上右键单击它并选择查看源代码）并单击<head>HTML 页面部分中引用的每个 .css 样式表。其中一个或多个将返回错误 404 或其他一些错误。
Each CSS sheet is in a <link>element in the Head of the HTML.
每个 CSS 表都位于<link>HTML 头部的一个元素中。
Example:
例子：
viewing the source code to this page will give a pile of code, in the <head>section is the <link>:
查看这个页面的源代码会给出一堆代码，在该<head>部分是<link>：
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/stackoverflow/all.css?v=8c7d44a438e6">
...
</head>
This shows that there is a style sheet in the link element, and for your page/site if you click through all of these (there may be multiple ones) and find the one that gives you the specific error.
这表明链接元素中有一个样式表，如果您单击所有这些（可能有多个）并找到给您特定错误的那个，则对于您的页面/站点。
UPDATE:
更新：
(Update) if I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
（更新）如果我在 Firefox 中查看开发人员工具的控制台，它会显示所有 css 文件并针对每个文件显示“HTTP/1.1 200 OK”。
Therefore you should be looking ineach of your CSS and related documents to see which document is linking out to an unreachable resource.
因此，你应该寻找在每一个你的CSS和相关文件，看看哪些文档链接了一个无法的资源。
回答by user2845840
Another reason for style sheet could not be loadedis "active mixed content" in combination with HTTPS. I.e. if your HTML code is loaded over HTTPS, but references a CSS that is delivered over HTTP, Firefox will block the CSS file. The blocking will cause an explanatory entry in the Web console. See https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_contentfor more information.
另一个原因style sheet could not be loaded是“活动混合内容”与 HTTPS 相结合。即，如果您的 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。
The blocking will also happen if the request for the CSS file is answered via HTTPS with a redirect and the redirect URL uses HTTP. And Google Chromium will also block active mixed content over HTTP and make an entry in its Javascript console.
如果对 CSS 文件的请求通过带有重定向的 HTTPS 响应并且重定向 URL 使用 HTTP，也会发生阻塞。Google Chromium 还将阻止通过 HTTP 的活动混合内容，并在其 Javascript 控制台中输入。
回答by Bill Chappell
I had this error from this stackexchange page, got the red line in firebug console. It pointed to the link https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=743e70f26396so I checked the page source copy/pasted the link into a new tab and hit enter. Firefox screamed Security issue certificate error, So I just added an exception and the CSS loads. This error did not appear in Chrome or IE.
我在这个 stackexchange 页面上遇到了这个错误，在 firebug 控制台中得到了红线。它指向链接https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=743e70f26396所以我检查了页面源代码副本/将链接粘贴到一个新选项卡中并按回车键。Firefox 尖叫安全问题证书错误，所以我只是添加了一个例外并加载了 CSS。此错误未出现在 Chrome 或 IE 中。
Easy fix.
轻松修复。
