SEC7113: CSS 因 Mime 类型不匹配而被忽略，Resource interpreted as Stylesheet but transfer，在浏览器中都不显示css样式效果

最新推荐文章于 2024-03-22 11:46:26 发布

原创最新推荐文章于 2024-03-22 11:46:26 发布 · 651 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器访问jsp页面不显示css样式效果 #jsp、css

本文解决了一个常见问题：在Tomcat服务器上运行的JSP页面无法加载CSS样式，浏览器控制台显示“SEC7113:CSS因Mime类型不匹配而被忽略”错误。通过删除JSP页面开头的特定代码并清理浏览器缓存，成功解决了样式加载问题。

问题描述：

jsp页面引入css，引入方式正确，css代码本身不存在问题，但Tomcat服务器启动后，在浏览器访问jsp页面，发现根本没有显示css样式的效果，查看浏览器的控制台发现如下错误警告：
SEC7113: CSS 因 Mime 类型不匹配而被忽略

Resource interpreted as Stylesheet but transferred with MIME type text/plain

解决办法：
把jsp页面开头的**** 删除即可。另外，浏览器记得清缓存

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_emm_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS不生效，提示：Resource interpreted as Stylesheet but transferred with MIME type application/x-css

celadonbird12的博客

05-05

1258

CSS不生效，提示：Resource interpreted as Stylesheet but transferred with MIME type application/x-css 初学Go语言如何实现一个Http Web服务器，于是在网上找了一个叫ChitChat的论坛的代码来研究，在调试的时候发现css不生效了，通过查看Chrome的开发者工具，发现Chrome提示了一个错误：Resou...

IE9 "CSS 因 Mime 类型不匹配而被忽略“问题

iteye_8029的博客

08-26

404

写页面的时候在chrome，fireforks等页面上显示正常，但是换成IE9之后就完全没有样式了。IE真是个奇葩的怪胎。它的报错信息是’CSS 因 Mime 类型不匹配而被忽略‘，也就是说所有的.css文件全部都不起效果了。去网上查了一些资料，有很多与这个问题相关的回答。首先要明白Mine类型是个什么。MIME类型就是设定某种指定扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访...

参与评论您还未登录，请先登录后发表或查看评论

IE9 CSS因Mime类型不匹配而被忽略问题相关解答

09-25

写页面的时候在chrome，fireforks等页面上显示正常，但是换成IE9之后就完全没有样式了，报错信息是CSS 因 Mime 类型不匹配而被忽略，下面与大家分享下这个问题的相关的回答

IE浏览器“SEC7113: CSS 因 Mime 类型不匹配而被忽略”问题的解决方法

weixin_30552635的博客

03-09

624

写好的CSS文件使用IE浏览器不加载，但使用火狐等浏览器却能够正常显示。读了这篇文章的方法2才知道，使用ie本地直接打开则调用file协议时CSS不加载，把所写的文件放入本地Apache服务器内，再用ie打开调用http协议，显示正常，问题解决。原帖位置：http://www.uedsc.com/css-mime-type-mismatch.html 什么是Mime类型...

解决IE11报错：CSS 因 Mime 类型不匹配而被忽略

shenweihong的博客

03-22

863

本人用springboot开发网站，手动处理js和css文件请求，报错：CSS 因 Mime 类型不匹配而被忽略。

Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://www.layuicdn.com/layui-v2.5.6/css/layui.css".

05-04

这个错误提示通常意味着浏览器在请求CSS文件时，服务器返回的MIME类型是"text/html"，而不是"text/css"。这可能是因为服务器配置不正确或者文件路径错误。可以尝试以下解决方案： 1. 确保CSS文件路径正确，检查是否...

css样式无法加载Refused to apply style from ‘http://localhost:8080/static/css/style.css’ because its MIME

01-20

在这种情况下，错误信息指出，样式文件被识别为`application/json`，这是一个用于JSON数据的MIME类型，而不是CSS样式表。这通常意味着服务器在处理请求时，错误地将CSS文件当作JSON数据来发送。有几种可能的原因和...

ie9 SEC7113: CSS 因 Mime 类型不匹配而被忽略

ancui2761的博客

02-26

264

今天在ie9下碰到SEC7113: CSS 因 Mime 类型不匹配而被忽的问题，很诡异，css的内容能够读取但是浏览器就是不渲染，而启用ie8的文档模式则正常。报错见图。现已解决，方案如下：先check了link引用的方式，发现缺少type=text/css，加上后报错依旧。然后根据http://blog.163.com/lihuangsuo@126/blog/stat...

IE9 IE10 SEC7113: CSS 因 Mime 类型不匹配而被忽略

anningdeai的博客

04-26

2043

浏览器将css的文件的content-type类型识别成了text/plain，但产生此问题的根本原因未找到。修改注册表、配置web.xml、配置tomcat都无效。最后只能添加或修改filter，将content-type修改成 text/css import org.springframework.web.util.UrlPathHelper; public class L

sec7113 css 因 mime,CSS 因 Mime 类型不匹配而被忽略

weixin_42297347的博客

08-04

446

你好玉振，IE9新的安全机制要求web server送过来的 HTTP response header中的content-type 必需指明css文件的MIME-type为'text/css'，否则IE9不会把它作为css文件来处理。修正措施如下：配置应用的web.xml文件中添加csstext/cssFor more information, you can refer here另外如果你用i...

CSS 因 Mime 类型不匹配而被忽略

09-02

459

晚上写了一个测试的html,在crome下都显示正常，想到ie下看看，结果样式错了，报一个错误： CSS 因 Mime 类型不匹配而被忽略百度了一下，我是这么解决的大家都写说是看看下注册表中 css 的 Content-type属性是不是 text/css，按照其操作，我做了一遍，的确改了过来，mark一下： win---->运行--》输入rege...

解决IE9下样式丢失报错“SEC7113: CSS 因 Mime 类型不匹配而被忽略 ”问题

weixin_30648963的博客

09-17

224

注：此文也是引用他人的博客原文网址为：http://blog.163.com/lihuangsuo@126/blog/static/3686389120112174544383/ 在此写出来希望大家能用的上在IE9网银样式丢失原因如下： IE9新的安全机制要求web server送过来的 HTTP response header中的content-type 必需指明css文件的MIME-...

IE9,IE10 CSS因Mime类型不匹配而被忽略问题 (转)

weixin_30402085的博客

01-05

194

写页面的时候在chrome，fireforks等页面上显示正常，但是换成IE9,IE10之后就完全没有样式了，报错信息是CSS 因 Mime 类型不匹配而被忽略，下面与大家分享下这个问题的相关的回答写页面的时候在chrome，fireforks等页面上显示正常，但是换成IE9之后就完全没有样式了。IE真是个奇葩的怪胎。它的报错信息是’CSS 因 Mime 类型不匹配而被忽略‘，...

解决IE下CSS因 Mime 类型不匹配而被忽略的问题

weixin_30668887的博客

07-13

1001

　　写页面的时候在chrome，firefox等页面上显示正常，但是换成IE9之后就完全没有样式了，报错信息是CSS 因 Mime 类型不匹配而被忽略，下面与大家分享下这个问题的相关的回答。IE真是个奇葩的怪胎。它的报错信息是’CSS 因 Mime 类型不匹配而被忽略‘，也就是说所有的.css文件全部都不起效果了。去网上查了一些资料，有很多与这个问题相关的回答。　　首先要明白Mine类型是个什么...

SEC7113: CSS 因 Mime 类型不匹配而被忽略

weixin_30565327的博客

08-06

501

IE9 下无法加载css时 SEC7113: CSS 因 Mime 类型不匹配而被忽略配置应用的web.xml文件中添加 <mime-mapping> <extension>css</extension> <mime-type>text/css</mime-type> </mime-mapping&...

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.0.0.1:8004/...

AI天才研究院

12-15

8865

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.0.0.1:8004/login". 20:22:46.254 127.0.0.1/:1 Refused to execute script from 'http://127.0....

Resource interpreted as Stylesheet but transferred with MIME type text/plain

To_yan的博客

08-10

1013

原本静态资源一直能正常访问，然后写着写着突然就冒出这么个错误，而且所有的静态文件都变成了html文件，无法访问。页面中有多少个静态文件的引用就转变成为对当前页面的多少次访问。。查了好久大都是各种扯。。最后总算还是找到原因，与下面参考的文章里的作者遇到的情况不同，他的是添加了过滤器，但我只是给servlet添加了一个 “/” 的url，没想到这也会屏蔽了所有的静态文件。而且至于为什么会转变为当

静态页面在ie下调试：CSS 因 Mime 类型不匹配而被忽略解决办法

u010782160的专栏

12-08

2288

可能各位有和我一样的经历，在其他浏览器测试页面没问题，用ie 测试后，页面样式不显示，调试出现：CSS 因 Mime 类型不匹配而被忽略网上查找了一些资料后，找到了解决静态页面css被忽略的办法，如下： 1、下载FileTypesMan，可自行百度。（FileTypesMan是一个用来查看系统中已注册文件类型的小工具。当然，在“文件夹选项”里面的“文件类型”选项卡里

css 因 mime 类型不匹配而被忽略，请求的本地css

最新发布

07-29

<think>我们正在解决CSS文件因MIME类型不匹配而未被正确加载的问题。根据引用，这个问题通常发生在本地使用`file://`协议打开网页时，因为系统可能无法正确返回CSS文件的MIME类型（应为`text/css`），导致浏览器阻止加载CSS。解决方案主要围绕如何正确配置MIME类型，或者避免在本地直接打开文件而使用本地服务器。步骤： 1. 使用本地服务器：避免使用`file://`协议，改用`http://`协议。可以通过搭建本地服务器（如Apache、Nginx）或使用开发服务器（如Python的`http.server`模块、Node.js的`http-server`包）来提供页面。 2. 检查CSS文件引用：确保在HTML中正确引用CSS文件，并且路径正确。 3. 检查CSS文件内容：确保CSS文件没有语法错误，并且编码与HTML页面一致（如都使用UTF-8）。 4. 服务器配置：如果使用服务器，确保服务器为CSS文件配置了正确的MIME类型（`text/css`）。大多数服务器默认已配置，但如果是自定义服务器，需要检查。具体方法：方法一：使用Python快速搭建本地服务器 - 打开命令行，进入项目目录。 - 运行命令： python -m http.server 8000 # Python 3 或 python -m SimpleHTTPServer 8000 # Python 2 - 然后在浏览器中访问：http://localhost:8000 方法二：使用Node.js的http-server - 首先安装：`npm install -g http-server` - 进入项目目录，运行：`http-server` - 然后访问：http://localhost:8080 方法三：配置MIME类型（如果使用服务器） - 对于Apache，可以在`.htaccess`文件中添加： AddType text/css .css - 对于Nginx，可以在配置文件中添加： location ~ \.css$ { add_header Content-Type text/css; } 方法四：检查HTML中link标签的写法 - 确保link标签的type属性为`text/css`（虽然HTML5中可省略，但加上更安全）： <link rel="stylesheet" type="text/css" href="styles.css"> 方法五：统一编码 - 在HTML文件中指定编码（如UTF-8）： <meta charset="UTF-8"> - 在CSS文件开头指定编码（如果需要）： @charset "UTF-8"; 注意：如果使用本地服务器后问题仍然存在，请检查CSS文件的路径是否正确，以及服务器是否正常运行。根据引用[1][2]，主要问题在于使用`file://`协议时，系统可能无法正确提供MIME类型。因此，使用本地服务器是最推荐的解决方案。另外，引用[3]中提到，即使指定了`type="text/css"`，也可能因为服务器未正确返回Content-Type而出现问题。所以，服务器配置正确是关键。引用[4]则提到编码不一致的问题，所以也要注意编码统一。因此，我们优先推荐使用本地服务器来避免此问题。</think>### CSS MIME类型不匹配问题分析与解决方案当CSS文件因MIME类型不匹配而无法加载时，通常是因为浏览器检测到服务器返回的Content-Type与实际文件类型不一致。以下是根本原因分析和解决方案： #### 根本原因 1. **本地文件协议限制** 使用`file://`协议直接打开HTML文件时，系统未正确返回CSS文件的MIME类型（应为`text/css`），导致浏览器阻止加载[^1][^2]。 2. **服务器配置错误** 本地或远程服务器未正确配置CSS文件的MIME类型，常见于： - Apache/Nginx未配置`.css`扩展名的MIME类型 - 开发服务器（如webpack-dev-server）未正确设置响应头[^3] 3. **编码不一致** CSS文件指定的编码（如`@charset "utf-8"`）与HTML页面的`<meta charset>`声明不一致[^4]。 #### 解决方案 **方法1：使用本地开发服务器（推荐）** ```bash # 安装Node.js的http-server npm install -g http-server # 进入项目目录并启动 http-server -c-1 # -c-1禁用缓存 ``` 访问`http://localhost:8080`代替直接打开文件，确保通过HTTP协议传输[^2]。 **方法2：配置服务器MIME类型** - **Apache**（.htaccess）： ```apache AddType text/css .css ``` - **Nginx**（nginx.conf）： ```nginx location ~ \.css$ { add_header Content-Type text/css; } ``` **方法3：HTML文件修正** ```html  <link rel="stylesheet" href="style.css" type="text/css">  <meta charset="UTF-8">  @charset "UTF-8"; /* CSS文件首行 */ ``` **方法4：开发环境特殊处理** - **Webpack**：在`webpack.config.js`添加： ```javascript devServer: { headers: { "Content-Type": "text/css" } } ``` - **VS Code**：使用Live Server扩展启动服务 #### 验证步骤 1. 浏览器开发者工具 > Network标签 2. 点击CSS文件请求 3. 检查Response Headers是否包含： ``` Content-Type: text/css; charset=utf-8 ``` > **关键提示**：本地测试务必通过`http://localhost`访问，而非`file://`路径[^1][^2]。若使用框架（如Angular），确保资源路径配置正确[^3]。