Home Web Front-end CSS Tutorial What to do if css is ignored due to mime type mismatch

What to do if css is ignored due to mime type mismatch

Apr 19, 2021 am 10:07 AM
css

Solutions for css being ignored due to mime type mismatch: 1. Detect the Link tag; 2. Browse the page through the http protocol; 3. Manually configure the server environment.

What to do if css is ignored due to mime type mismatch

The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

What is the reason for the "SEC7113: CSS was ignored due to Mime type mismatch" problem in IE browser? How to deal with it? The following article will introduce it to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

What are Mime types?

MIME (Multipurpose Internet Mail Extensions) multipurpose Internet mail extension type is a type that sets a file with a certain extension to be opened by an application. When the file with the extension is accessed When the time comes, the browser will automatically use the specified application to open. It is mostly used to specify some client-defined file names and some media file opening methods.

Why does the error occur?

In IE browsers above IE9, especially in the local environment, when there is no server configuration, the CSS file of the external link will not be loaded successfully, resulting in the desired effect. Not implemented! When you encounter such a problem, you will see the error message "SEC7113: CSS ignored due to Mime type mismatch" in the console of the debugging tool that comes with IE.

Microsoft has added a file name recognition program since IE9. This will only appear in the standard mode of IE9 and above. There is no problem in the compatibility mode.

[Recommended learning: css video tutorial]

Solution

Now that we know the cause of this error, then we This problem can be solved in a targeted manner. The following contains the detection steps and methods. You can skip certain steps according to your actual situation.

1. Detect the Link tag

The Link tag is the tag we introduce into the style sheet. Check whether the type=text/css attribute is missing. Here is a complete example of the Link tag.

<link rel=stylesheet type=text/css href="style.css">
Copy after login

If you find that it has no effect after adding it, then read on.

2. Static pages cannot display styles

In fact, many people encounter this problem by directly using the browser to open the web page locally, that is, they do not browse the page through the http: protocol. The web page is opened through the file: protocol. CSS cannot return the correct Mime, possibly due to issues with your system.

Enter the registry editor and check whether the Content Type in HKEY_CLASSES_ROOT\.css is text/css.

3. The server environment cannot display the style.

The style cannot be displayed in the server environment. Whether it is local or remote, the solution is the same. Since the server cannot return the correct document type, We need to configure it manually.

IIS Server

For the IIS server, configure the web.xml file to require the server to output correct CSS Mine information.

<mime-mapping>
<extension>css</extension>
<mime-type>text/css</mime-type>
</mime-mapping>
Copy after login

Apache Server

When the web server sends a document to the browser, it prefixes the document with a response header. This header contains information that tells the browser how to interpret the document. Data, one of the most important parts of metadata is the Content-Type in the last line. It will tell the browser how to render the content. For example, the code used by browsers to display JPEG and GIF is different.

Here we need to correctly configure the Content-Type of the CSS file. There is a conf folder in the Apache installation directory. The mime.types file inside is the response header document type configuration.

Add some code to the mime.types file, and then restart the Apache server.

text/css                    css
Copy after login

If it still doesn’t work, try adding some code to the httpd.conf file to load the mime.types configuration file.

<IfModule mime_module>
TypesConfig conf/mime.types
</IfModule>
Copy after login

The above is the detailed content of What to do if css is ignored due to mime type mismatch. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to write split lines on bootstrap How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

How to set up the framework for bootstrap How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to resize bootstrap How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to use bootstrap button How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

See all articles