External CSS not working in IE11

问题

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

I've read the stackoverflow thread before, and I'm sure my problem is not about browser caching. Thanks Mauro for notification.
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

I've try both of closed and non-closed link tag, both of them are not solve my problem with IE11.
I've try to disable Basic Authentication, still not working.

UPDATE

The CSS also works in Firefox 39.
The CSS works with IE11 + Compatible mode (but HTML5 tags will be ignored).

回答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.

回答2:

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

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

回答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.

回答4:

Check if HTML1202 issue described here can resolve your problem.

if so, check this: How to avoid ie8 compatibility button?

来源：https://stackoverflow.com/questions/31647882/external-css-not-working-in-ie11

标签

html

css

internet-explorer-11