Chrome 将 CSS 样式表解释为图像
Posted
技术标签:
【中文标题】Chrome 将 CSS 样式表解释为图像【英文标题】：Chrome interprets CSS Stylesheet as image 【发布时间】：2012-06-26 07:41:34 【问题描述】：在我的 CodeIgniter 网站中，当在 Chrome 中查看时，控制台显示警告
style.css interpreted as IMAGE but transferred with MIME type text/css
页面按照我的预期呈现，但是当我右键单击并检查任何元素时，它的“计算样式”显示为空白，使调试变得困难。
这就是我提供 CSS 文件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<link rel="icon" type="image/png" href="<?= base_url('assets/images/favicon.png'); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?= base_url('assets/css/style.css');?>" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
使用 Chrome 扩展程序，我在请求 style.css 时监控了标头的发送，这就是我得到的：
编辑
这是在共享的 Godaddy 主机上的 LAMP 服务器上。我的重写 htaccess 仅包含以下重写规则：
RewriteEngine On
RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteBase /
RewriteRule ^(.*)$ /index.php?$1 [L]
【问题讨论】：
只是 chrome 吗？还是所有浏览器都会发生这种情况？ Firefox（带有萤火虫）在我检查元素时能够正常计算样式。甚至带有 Firebug 的 Chrome 也能正常工作。似乎只有 Chrome 原生检查器有问题。 尝试将此添加到您的 .htaccessAddType text/css .css
我在 chrome 上的项目也会发生这种情况。我不知道为什么会这样。
【参考方案1】：
这很可能是由 css 文件中的无效相对路径引起的。
例如 在 html 中 可以通过添加 <img src="" /> 来复制类似的消息，该消息将被解析为相对路径并解析为 *current_page_url* - 提示“...但使用 MIME 传输输入文本/html”错误。
【讨论】：
我注释掉了我在 CSS 文件中使用路径的每个实例（主要是background-images），但仍然存在同样的问题。
@xbonez：我进行了更多搜索，发现these answers 证实了我的怀疑。您能否在 jsfiddle 中重现该问题，如果可以，您可以分享代码吗？
这解决了我的问题——在本地 wamp 安装上进行开发。以上是关于Chrome 将 CSS 样式表解释为图像的主要内容，如果未能解决你的问题，请参考以下文章
Flask：资源解释为样式表，但使用 MIME 类型 text/html 传输
Springboot - 资源解释为样式表，但使用 MIME 类型 text/html 传输