外部CSS文件已加载但未应用

Question

外部CSS文件已加载但未应用

css

12

湿件错误

这是一个打字错误 - 有两个名字相似的不同css文件，我在一个网站中链接到一个文件，在另一个网站上链接到另一个文件。

对于这个小丑般的错误表示道歉 :(

已关闭

我在html头部分有以下这行代码:

<link rel="stylesheet" href="http://files.hypernumbers.com/redesign/frontpage.css">

当我从域名为 hypernumbers.com 的页面中查看此页面时，它可以正常加载并应用。

但是，当我从域名为 hypernumbers.dev 的页面中查看同一页面时，它可以加载（Firebug 和 Chrome 工具显示 CSS 文件已经存在），但不能应用到页面上。

是否存在某种关于域名优先级/子域的问题，我不知道吗？

更新：

在 Opera 浏览器中尝试了一下，在 hypernumbers.com 或 hypernumbers.dev 均不能加载...

- Gordon Guthrie

所有主要浏览器的行为是否一致？ - colithium

Chrome 和 Firefox （我的开发机是 Linux，所以只有这两个） - Gordon Guthrie

嗯，那并不完全正确，还有Opera。 - David Thomas

我曾经遇到过同样的问题，但是我尝试了另一种链接方式：<link rel="stylesheet" href="//files.hypernumbers.com/redesign/frontpage.css"> 这种方式对我来说很有效，解决了我的问题。 - manoj

2个回答

1

这可能有点疯狂的猜测，但如果您添加属性type="text/css"，会有什么区别吗？另外，CSS文件和HTML文档的编码是什么？

最后一步检查，您考虑过下载文件并制作本地副本吗？只是为了确保在您的网络和Hypernumbers之间没有任何问题？

- David Thomas

好的建议，我尝试了一下，但没有任何改变 :( - Gordon Guthrie

我发现Opera会为所有CSS拼写错误提供可爱的错误消息，所以我设法修复了半打可能成为漏洞的小问题，这太棒了 :) - Gordon Guthrie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jdiemz · Accepted Answer

这是一个相当古老的问题，但既然它是谷歌搜索结果中的首选，我会在这里提供我的解决方案。

我也遇到了同样的问题，我的 CSS 文件是可访问的，也被浏览器下载了，但实际上并没有应用它们。我可以手动浏览到 CSS，但 Firefox 和 Chrome 都没有应用它们。

这是我的链接标签：

<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">

看起来没问题，路径是正确的...我甚至记得设置了类型，但还是不行。

事实证明，我的Web服务器将CSS文件的内容类型强制为application/octet-stream。因此，即使我在链接标签中指定了type，Firefox和Chrome也会从服务器看到错误的内容类型，并拒绝应用样式表。

如果您正在使用已安装Firebug的Firefox，则可以在“Net”选项卡中查看服务器发送的内容类型。

在我的情况下，使用Lighttpd，修复方法是像这样将".css" => "text/css"添加到mimetypes.assign中：

mimetype.assign     = ( ".html" => "text/html",
                        ".txt" => "text/plain",
                        ".jpg" => "image/jpeg",
                        ".png" => "image/png",
                        ".css" => "text/css",
                        "" => "application/octet-stream" )

希望这能避免某人花费数小时进行谷歌搜索和头痛的折磨。