Question

加载我的网站时遇到突然问题。 http://busme.us。使用较新版本的Chromium。

似乎我的一个样式表没有应用于元素，因为我可以从Inspect Element中找到它。

有问题的链接如下：

<link href="http://objects.dreamhost.com/busme-prod-files/main/538e298e22f324388b007ab8/original/style.css" rel="stylesheet">

然而，主要的CSS似乎正在被处理，并且正在为元素分配CSS，即：

<link href="//busme-prod-assets.objects.dreamhost.com/assets/normal-layout-3df2197619a7f407056e8569a5b5819f.css" media="all" rel="stylesheet" type="text/css">

这一切都适用于Firefox和Safari。它不适用于以下版本的Chromium。

版本45.0.2454.85 Ubuntu 14.04（64位）版本44.0.2403.89 Ubuntu 14.04（64位）

这些是从之前运行的Chromium浏览器升级而来的。那么，Chromium的升级改变了什么？自升级以来，我没有旧版本可供测试。

如果我下载style.css的内容并使用开发者工具，我会插入一个包含<style>内容的style.css元素，它可以正常工作。因此，我认为这不是Chrome特有的语法问题。

此外，我已经看到其他答案，例如CDN返回了错误的内容类型binary/octet-stream，但这个内容类型对于所讨论的两个CSS文件都是相同的，那么为什么一个工作和不是另一个？无论如何，我无法真正改变响应类型，因为我无法控制CDN。

在开始指出链接中的type="text/css"和media="all"以及http:差异之前，我也改变了这些差异。 Inspect Element表示已下载style.css文件，并声明其“类型”为“样式表”，normal-layout.css

相同

我甚至通过将页面下载到文件中，在本地编辑并从文件中加载具有相同结果的链接来进行更改以使链接看起来完全相同。试试吧！

所以，我真的不知道发生了什么。

为什么只有Chrome？与其他浏览器的不兼容性是什么？

感谢。

Answer 1

正如上面的评论所述，问题实际上是Content-type标题。

具体来说，http://objects.dreamhost.com/busme-prod-files/main/538e298e22f324388b007ab8/original/style.css文件正在使用Content-type: undefined标头提供。它应该是Content-type: text/css。

您提及的另一个文件http://busme-prod-assets.objects.dreamhost.com/assets/normal-layout-3df2197619a7f407056e8569a5b5819f.css与Content-type: text/css一起提供，这就是它按预期工作的原因。

自行验证内容类型

要自己验证标头，可以使用带有curl选项的-I命令，如下所示：

curl -I http://objects.dreamhost.com/busme-prod-files/main/538e298e22f324388b007ab8/original/style.css

产生此输出：

HTTP/1.1 200 OK
Content-Length: 16795
Accept-Ranges: bytes
Last-Modified: Tue, 03 Jun 2014 20:01:18 GMT
ETag: "06b3748eba4f2e5ccb70e8444abd5c77"
Content-type: undefined
Date: Thu, 24 Sep 2015 21:33:18 GMT

将其与运行此项进行比较：

curl -I http://busme-prod-assets.objects.dreamhost.com/assets/normal-layout-3df2197619a7f407056e8569a5b5819f.css

这产生了这个：

HTTP/1.1 200 OK
Content-Length: 239447
Accept-Ranges: bytes
Last-Modified: Thu, 07 May 2015 05:44:24 GMT
ETag: "e4b17d7e6405120b1488079bb0081e6f"
Cache-Control: public, max-age=31557600
Expires: Fri, 06 May 2016 11:44:23 GMT
Content-type: text/css
Date: Thu, 24 Sep 2015 21:33:36 GMT

如果您没有安装curl命令，但确实有wget命令，则可以使用wget -S获取类似信息，如下所示：

wget -S http://objects.dreamhost.com/busme-prod-files/main/538e298e22f324388b007ab8/original/style.css

此外，我已经看到其他答案，例如CDN正在返回二进制/八位字节流的内容类型错误，但此内容类型两个CSS文件都是一样的，为什么一个工作，而不是其他？

如上面的curl -I输出所示，您提到的文件的Content-type实际上并不相同;一个具有正确的Content-type: text/css标题，而另一个没有。

如果您能够使用正确的http://busme-prod-assets.objects.dreamhost.com标题从Content-type: text/css提供文件，那么您应该能够确保curl -I http://objects.dreamhost.com/busme-prod-files文件也能获得对Content-type。

来自CDN的Chromium CSS链接被忽略

1 个答案:

自行验证内容类型