html - 来自 CDN 的 Chromium CSS 链接被忽略

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 is returning the wrong content type of binary/octet-stream ，但是对于所讨论的两个 CSS 文件，这种内容类型是相同的，那么为什么一个有效而另一个无效呢？无论如何，我无法真正更改响应类型，因为我不控制 CDN。

在您开始指出 type="text/css" 之前和 media="all"和 http:链接的差异，我也更改了这些链接。 Inspect Element 说它已经下载了 style.css文件，它声明其“类型”是“样式表”，与normal-layout.css 相同

我什至通过将页面下载到文件中、在本地编辑它并从文件加载它并获得相同的结果来进行更改以使链接看起来完全相同。试试吧!

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

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

谢谢。

Answer 1

正如上面评论中提到的，问题实际上是 Content-type header 。

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

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

---

自行验证内容类型

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

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

---

Furthermore, I have seen other answers, such as the CDN is returning the wrong content type of binary/octet-stream, but this content type is the same for both of the CSS files in question, so why does one work and not the other?

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

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