External CSS not working in IE11

html css internet-explorer-11

10,583

Solution 1

I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.

IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):

SEC7113: CSS was ignored due to mime type mismatch.

Fix was simply to mark the HTML response mime-type as "text/css" and all was OK. Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.

Solution 2

Try adding this attribute to the link tag: type="text/css" Example:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen">

Solution 3

After I compare a lot of website, I find out this problem could be solved easily by just remove the html5 declaration <!DOCTYPE html>. However, I don't understand why IE11 act like that, it should have support html5.

PS. I've read this SO article and add type="text/css", but it seems IE11 never care about that.

10,583

Author by

J.C

Life is short, code more! I'm a software department head of a SME in Taiwan. My job is coding, my interest is coding, and my leisure activity ... is coding lol

Updated on June 07, 2022

Comments

J.C almost 2 years
I have wrote my own embed-server, which can generate response to web browsers. The generated "main page" is like the following html.
```
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="styles.css"><title>ABC Inc. Web Configurator</title></head><body>
<nav><p>[<b>Home</b>]</p></nav>
<table>
<tr><td><a href=Config>Config</a></td></tr>
<tr><td><a href=Logger>Logger</a></td></tr>
</table>
<footer>Web Configurator &copy; ABC Inc. 2014 - 2015</footer></body></html>
```
And the generated CSS file is
```
.even{
	background-color: #EFF;
}
.odd{
	background-color: #FFE;
}
.title{
	background-color: #226;
	color: #EEF;
}
a{
	color: #36C;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
body{
	font-family: Tahoma;
	font-size: 100%;
}
footer{
	color: #999;
	font-size: 0.7rem;
}
nav{
	background-color: #DDF;
	font-size: 1.1rem;
}
td{
	min-width: 60px;
}
```
When I browse the main page by Chrome 43 or Firefox 39, they're both okay. However, when I use IE11, the CSS not apply to the html, even though that I can make sure IE11 have access the CSS file from my server. If I press F12 in IE, the DOM manager shows no stylesheet in this page.

BTW, my URL is http://localhost:8888/, and need a basic authentication. Any idea how can I fix it?

UPDATE
1. I've read the stackoverflow thread before, and I'm sure my problem is not about browser caching. Thanks Mauro for notification.
2. I've tried Chrome + IE tab2, the CSS works, but not apply to nav and footer tag. I guess IE tab not support HTML5.
UPDATE
1. I've try both of closed and non-closed link tag, both of them are not solve my problem with IE11.
2. I've try to disable Basic Authentication, still not working.
UPDATE
1. The CSS also works in Firefox 39.
2. The CSS works with IE11 + Compatible mode (but HTML5 tags will be ignored).