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

发布于 2024-10-22 23:30:54 字数 3204 浏览 5 评论 0原文

首先,我想在序言中说,我对编程非常陌生,所以如果我不能尽快跟上,请原谅我。

现在,我遇到了一个问题,这几天来一直困扰着我,我到处寻找解决方案。

我正在使用 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 文件:

RewriteEngine on

RewriteCond %{SCRIPT_FILENAME} !-f

RewriteCond %{SCRIPT_FILENAME} !-d

RewriteRule ^(.*)$ 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>

So first of all, I want to preface by saying I am very new to programming so forgive me if I don't follow as quickly.

Now, I am having a problem that is really bothering me for the last few days and I have searched everywhere for a solution.

I am using a WAMP server configuration. Everything has been working fine until I started working with CSS. I have an external CSS file.

When I view my HTML page in Dreamweaver, I see that it is properly connecting to that CSS file. I can see the styles being applied in the Design view. However, when I view the page in the browser, Firefox says (in Error Console) that the .css file cannot be loaded because its MIME type is text/html and not text/css.

So I figured this was a server configuration problem. What I did was the following:
I went into the .HTACCESS file and added the following line:
AddType text/css .css

After restarting my server, this still did not solve the problem. For some reason, the browser keeps reading my css file as an html file. Any idea what could possibly going wrong here?

Here's the head of the file I'm trying to load in the browser (it's actually a Smarty template):

<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>

Also, please note that I am coding using a Zend framework.
Here is my .HTACCESS file:

RewriteEngine on

RewriteCond %{SCRIPT_FILENAME} !-f

RewriteCond %{SCRIPT_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1

AddType text/css .css

So I took the advice of DA and clicked on View Page Source when viewing the page in browser and clicked on the link to my CSS file. This is what it shows me:

When I click on link, I see this:

<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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

深海蓝天 2024-10-29 23:30:54
href="../htdocs/css/styles.css"

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

出于某种原因,Zend 正在发送其“指定的控制器无效(错误)”(意思是“我找不到我已经找到的内容”)被要求”,状态代码为 200 OK,因此浏览器会说“这是一个 HTML 文档”,而不是“在那里找不到任何内容”。

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

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

The htdocs directory is usually the webroot. So, while this is a perfectly good path on your local file system, once you access it through a webserver the ../ is ignored because you are in the top of the local part already. Then there is no htdocs so the rest of the path should 404.

For some reason, Zend is sending out its "Invalid controller specified (error)" (meaning "I can't find what I've been asked for" with a 200 OK status code, so the browser is saying "This is an HTML document" instead of "Nothing was found there".

Remove the ../htdocs/ part from the URL.

浮世清欢 2024-10-29 23:30:54

您可能正在使用 CSS
这可能类似于 Mozilla Bug。请分享您的代码,以便我们提供更好的建议。

You may be using CSS probably by using <link rel=stylesheet href="cssName.html">
This may be similar to the Mozilla Bug. Please share you code so that we can provide better suggestions.

愛上了 2024-10-29 23:30:54

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

或者问题可能是您有服务器配置问题。如果是新安装的 WAMP,则这种情况不太可能发生。

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

  • 在 Firefox(或任何浏览器)中查看源代码
  • ,单击您创建的 CSS 链接。如果您无法单击它,您可能必须将其复制粘贴到新窗口中。
  • 它会将您带到 CSS 文件或其他文件吗?

如果它带您到另一个文件,则意味着您尚未正确链接它。您可能最好使用绝对路径(来自您的网络根目录)而不是相对路径。

编辑:在 Zend Framework 中使用样式表

假设您的 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');

The problem here can be two fold. Either the CSS file is missing and your system is serving up a 404 page (if you've configured it) so the browser is complaining that it's not a CSS file.

Or the problem could be that you have a server configuration issue. If it's a new installation of WAMP, this is pretty unlikely.

Have you tried accessing the file directly?

  • View the source in Firefox (or any browser)
  • click on the CSS link you've made. If you can't click on it you may have to copy paste it in a new window.
  • Does it take you to the CSS file or some other file?

If it takes you to another file that means you haven't linked it properly. You may be better off using an absolute path (from your webroot) rather than a relative path.

EDIT : Using stylesheets in Zend Framework

Assuming your CSS files are in ZF/public/css, you would include them in your layout or view like this

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

Designate an area for it to be printed out (in your layout)

echo $this->headLink()

However, if it's a sitewide css file and you want to include your CSS only in the layout, then simply echoing it out will suffice

echo $this->headLink()->appendStylesheet('/css/global.css');
ま昔日黯然 2024-10-29 23:30:54

感谢大家的帮助!你们中的很多人都是对的,它最终与 href 路径有关。所以,我能够修复这个错误,但看起来解决方案很简单,问题也很愚蠢!

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

因此,我将 Dreamweaver 中的站点根目录设置为我的根目录(.HTACCESS 所在的位置),并将路径更改为简单的“/css/styles.css”。

现在可以了!

抱歉给大家添麻烦了,感谢大家的帮助!

Thanks for the help everyone! A lot of you were right, it ultimately had to do with the href path. So, I was able to fix the error, but it seems the solution was simple and the problem silly!

In Dreamweaver, I did not define the Site Root folder!! This was causing a problem because I was using a relative path, but it wasn't finding it correctly ultimately because the Site Root wasn't defined!

So I set the Site Root in Dreamweaver to my Root directory (where .HTACCESS is located) and changed the path to simply "/css/styles.css".

And now it works!

Sorry to trouble everyone and thank you all for your help!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文