外部 CSS 文件未在浏览器中加载答案

【问题标题】：External CSS file is not loading in the browser外部 CSS 文件未在浏览器中加载
【发布时间】：2011-07-15 12:22:36
【问题描述】：

首先，我想说我对编程很陌生，所以如果我没有尽快跟进，请原谅我。

现在，最近几天我遇到了一个困扰我的问题，我到处寻找解决方案。

我正在使用 WAMP 服务器配置。在我开始使用 CSS 之前，一切都运行良好。我有一个外部 CSS 文件。

当我在 Dreamweaver 中查看我的 HTML 页面时，我发现它已正确连接到该 CSS 文件。我可以在设计视图中看到正在应用的样式。但是，当我在浏览器中查看页面时，Firefox 说（在错误控制台中）无法加载 .css 文件，因为它的 MIME 类型是 text/html 而不是 text/css。

所以我认为这是服务器配置问题。我所做的是以下内容：我进入 .HTACCESS 文件并添加了以下行： AddType text/css .css

重新启动我的服务器后，这仍然没有解决问题。出于某种原因，浏览器一直将我的 css 文件作为 html 文件读取。知道这里可能出了什么问题吗？

这是我试图在浏览器中加载的文件的头部（它实际上是一个 Smarty 模板）：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../htdocs/css/styles.css" type="text/css" media="all" />
</head>

另外，请注意我正在使用 Zend 框架进行编码。这是我的 .HTACCESS 文件：

重写引擎开启

RewriteCond %{SCRIPT_FILENAME} !-f

RewriteCond %{SCRIPT_FILENAME} !-d

重写规则 ^(.*)$ index.php/$1

AddType text/css .css

所以我听取了 DA 的建议，在浏览器中查看页面时点击了查看页面源，然后点击了指向我的 CSS 文件的链接。这就是它向我展示的内容：

当我点击链接时，我看到：

<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0'  cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Fatal error: Uncaught exception 'Zend_Controller_Dispatcher_Exception' with message 'Invalid controller specified (error)' in C:\shaancode\www\phpweb20\htdocs\Zend\Controller\Dispatcher\Standard.php on line <i>248</i></th></tr>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Zend_Controller_Dispatcher_Exception: Invalid controller specified (error) in C:\shaancode\www\phpweb20\htdocs\Zend\Controller\Dispatcher\Standard.php on line <i>248</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>

<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0006</td><td bgcolor='#eeeeec' align='right'>382488</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\shaancode\www\phpweb20\htdocs\index.php' bgcolor='#eeeeec'>..\index.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0892</td><td bgcolor='#eeeeec' align='right'>4748936</td><td bgcolor='#eeeeec'>Zend_Controller_Front->dispatch(  )</td><td title='C:\shaancode\www\phpweb20\htdocs\index.php' bgcolor='#eeeeec'>..\index.php<b>:</b>42</td></tr>
</table></font>

【问题讨论】：

你的 css 文件的文件名是什么，当你查看浏览器时，你链接样式表标签是什么意思？
嘿，Shaan，我们需要查看头部的 HTML 来弄清楚发生了什么。一旦您发布了该内容，我们就会对发生的事情有更多的了解。
你的 CSS 文件的内容是什么样的？
在 Firefox 中从您的服务器打开您的页面。去查看源代码。在源文件中，单击 CSS 文件的 URL。什么负载？我的猜测是您的 CSS 文件链接没有链接到文件，因此您的服务器将其作为自定义错误页面提供服务。该页面将是 HTML，因此会出现错误。
我粘贴了我点击该链接时看到的内容。我在这里看到某种错误，但不确定我是否理解发生了什么？哦，看起来这是 Zend 显示错误时的样式。嗯。为什么会这样显示？

标签： css configuration mime-types mime

【解决方案1】：

href="../htdocs/css/styles.css"

htdocs 目录通常是 webroot。因此，虽然这是本地文件系统上的一个非常好的路径，但一旦您通过网络服务器访问它，../ 将被忽略，因为您已经在本地部分的顶部。那么没有htdocs 所以路径的其余部分应该是404。

由于某种原因，Zend 发送了它的“指定的控制器无效（错误）”（意思是“我找不到我被要求的内容”和 200 OK 状态码，所以浏览器说“这个是 HTML 文档”而不是“那里没有找到任何东西”。

从 URL 中删除 ../htdocs/ 部分。

【讨论】：

如果我从 URL 中删除 htdocs/ 部分，则在 Dreamweaver 中将无法再找到 css 文件。
Shaan 你真的不应该依赖于查看在 Dreamweaver 中呈现的 CSS。从来都不是很好，总是有错误。使用 DW 作为一个不错的文本编辑器，但使用您的网络浏览器来查看该站点的实际工作方式。

【解决方案2】：

您可能正在使用 CSS，可能是通过使用 <link rel=stylesheet href="cssName.html"> 这可能类似于Mozilla Bug。请分享您的代码，以便我们提供更好的建议。

【讨论】：

【解决方案3】：

这里的问题可能有两个方面。 CSS 文件丢失并且您的系统正在提供 404 页面（如果您已配置它），因此浏览器抱怨它不是 CSS 文件。

或者问题可能是您的服务器配置问题。如果是新安装的 WAMP，这不太可能。

您是否尝试过直接访问该文件？

在 Firefox（或任何浏览器）中查看源代码
单击您创建的 CSS 链接。如果您无法单击它，则可能必须将其复制粘贴到新窗口中。
它会将您带到 CSS 文件还是其他文件？

如果它把你带到另一个文件，这意味着你没有正确链接它。您最好使用绝对路径（来自您的 webroot）而不是相对路径。

编辑：在 Zend 框架中使用样式表

假设您的 CSS 文件位于 ZF/public/css 中，您可以像这样将它们包含在您的布局或视图中

$this->headLink()->appendStylesheet('/css/styleForThisPage.css'); // in your view

指定要打印的区域（在您的布局中）

echo $this->headLink()

但是，如果它是一个站点范围的 css 文件，并且您只想在布局中包含您的 CSS，那么只需将其回显就足够了

echo $this->headLink()->appendStylesheet('/css/global.css');

【讨论】：

文件链接正确。我已经在 Firefox 中加载了它。当它加载时，我看到纯文本的 CSS 文档。如果我从浏览器中选择查看页面信息，它会显示类型：text/css。
将您的 .htaccess 文件粘贴到您的问题中。另外，您是否使用任何 PHP 框架或虚拟主机？
当然，我会更新问题。我也在使用 Zend 框架。我只是将 localhost 设置为我的虚拟主机。
那么问题可能是路径问题。你应该使用 urlhelper 或 headlink 帮助器来包含你的 CSS
哦，我明白了。能否请您详细说明如何使用 urlhelper 或 headlink helper？

【解决方案4】：

感谢大家的帮助！你们中的很多人是对的，它最终与 href 路径有关。所以，我能够修复错误，但似乎解决方案很简单而且问题很愚蠢！

在 Dreamweaver 中，我没有定义站点根文件夹！！这导致了一个问题，因为我使用的是相对路径，但最终没有正确找到它，因为没有定义站点根！

所以我将 Dreamweaver 中的站点根目录设置为我的根目录（.HTACCESS 所在的位置）并将路径更改为简单的“/css/styles.css”。

现在它可以工作了！

很抱歉给大家添麻烦了，谢谢大家的帮助！

【讨论】：

请对对您有帮助的答案投票。很高兴你成功了。