Firefox 无法在 HTTPS 上加载 CSS 文件
Posted
技术标签:
【中文标题】Firefox 无法在 HTTPS 上加载 CSS 文件【英文标题】：Firefox fails to load CSS files on HTTPS 【发布时间】：2015-05-14 06:13:02 【问题描述】：你可以在这里看到我的问题： https://www.rekuperatory.pl/ssltest/
当您使用 Firefox 打开此站点时，它无法加载 CSS。问题是，CSS 在 Chrome、IE 和 Opera 中正确加载。 FF 也可以正确读取内联样式。
通过 HTTP 访问网站时没有问题： http://www.rekuperatory.pl/ssltest/ - 它可以在包括 Firefox 在内的所有浏览器上正常加载。
问题在于仅适用于 Firefox，仅通过 HTTPS 且仅适用于单独文件中的 CSS。
我已经联系了托管服务提供商，他们说 SSL 证书一切正常，问题一定出在链接 CSS 文件上。但我不认为这是真的。直接看代码：
h1
color: #2387ff;
font-size: 50px;
text-align: center;
background-color: #F0F8FF;
.hide
display: none;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>
This should be blue and centered
</h1>
<div class="hide">CSS NOT LOADED* <br/> <small>*This DIV has "display: none" rule</small>
</div>
<h2 style=" color: #499249; text-align: center; background-color: #e6ffe3;">
Header with inline style.
</h2>
</body>
</html>【问题讨论】：
【参考方案1】：这很可能是由于style.css 请求的响应标头不正确
https://www.rekuperatory.pl/ssltest/style.css 未加载，因为 它的 MIME 类型“text/html”不是“text/css”。
请注意，当您访问http:// url 时，服务器正确响应Content-Type: text/css，但是在https:// url 上它响应Content-Type: text/html。
【讨论】：
确实...有趣的是 Firebug 不会抛出此错误。它仅在捆绑的开发人员工具中可见。这就是为什么我没有看到它。你知道我该如何解决这个问题，以便服务器返回正确的类型吗？ 您必须确保您的服务器针对您遇到问题的 MIME 类型进行了正确设置，这取决于您用于提供内容的 Web 服务器。我建议这在专门针对此问题的新问题中会更成功。 事实证明，这是由负责处理浏览器缓存的 .htaccess 条目引起的。现在一切都很好。谢谢！【参考方案2】：我不确定为什么人们会找到复杂的解决方案。就我而言，我只需要删除缓存文件和 cookie（稍后在刷新时大多会省略）。如果您使用缓存优化，不仅在浏览器中，而且在您的网站中。
【讨论】：
以上是关于Firefox 无法在 HTTPS 上加载 CSS 文件的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 和 Firefox 上重新加载 js 和 CSS
不希望图像加载和 CSS 在 Selenium WebDriver 中的 Firefox 上呈现 - Python