来自本地文件的远程 css 不起作用？

Posted 2023-03-15

【中文标题】来自本地文件的远程 css 不起作用？

【英文标题】：remote css from local file doesn't work?

【发布时间】：2011-09-13 09:25:14

【问题描述】：

我完全是 CSS 的菜鸟。

我在本地和远程都有一个 css 文件。我在地址栏中加载了一个本地 html 文件（即 c:\temp\index.html）。我用火狐。

文件将'html'、'body'和2个div的高度设置为100%（高度：100%）

当我链接到本地​​ css 文件时，一切正常。当我链接到远程文件时，看起来高度样式（至少）不起作用。我在 javascript 中尝试获取 body 元素的 offsetHeight 属性时看到了这一点。

这可能是什么原因？

我使用以下方式链接到远程站点： <link rel="stylesheet" media="screen, projection" href="https://raw.github.com/SirPepe/Pik5/master/assets/css/pik5.css">

（本地文件的doctype为html）

测试：克隆https://github.com/SirPepe/Pik5，加载本地 index.html 文件。然后将其更改为 <link rel="stylesheet" media="screen, projection" href="assets/css/pik5.css"> 变为 <link rel="stylesheet" media="screen, projection" href="https://raw.github.com/SirPepe/Pik5/master/assets/css/pik5.css">。重新加载以查看幻灯片不再正确设置

注意：使用 firebug 我看到 css 文件加载

【问题讨论】：

请显示您如何链接到远程 css

“本地”是指http://localhost/file.html 之类的东西，或者只是在 Windows 资源管理器中双击 HTML 文件？

需要更多信息和代码

更新了更多信息

这很有趣....我注意到的一件事是，当使用 github 文件时，第 5 行被忽略...但是差异显示没有差异

【参考方案1】：

因此，在进行了一些挖掘之后，看起来您的 CSS 文件被 链接 到，但实际上没有应用您的样式。这让我相信还有其他事情发生。我通过验证器运行了您的 html，但没有发现任何具体内容，但是当通过验证器运行您的 github css 时，我得到了以下响应：

I/O 错误：未知的 mime 类型：文本/纯文本

看起来 github 为您的样式表文件发送了一个 Content-Type HTTP 标头，其中显示 text/plain 而不是 text/css。您也许可以在您的 html 文档中为该样式表链接简单地定义 type="text/css，但否则我不确定您如何解决此问题，因为您无权访问它们的 mime 类型设置。

在此处查看类似问题：Add mime type to HTML link

【参考方案2】：

Dave 的帖子确实描述了这个问题。这是解决方案。您需要使用http://rawgithub.com 而不是http://raw.github.com。是的，没错，只需删除.！

问题在于 Github 不提供具有正确 MIME 类型的“原始”文件，以允许您热链接它们。输入 Ryan Grove，他创建了 rawgithub.com 站点来解决这个问题。当您访问其服务器请求文件时，它会依次从 Github 的服务器获取该文件，并为您更正 MIME 类型。

警告：它不用于生产用途。仅用于演示和开发。