CSS isn't rendering from localhost - but only in Chrome and IE

Question

I've validated all my HTML and CSS, and there are no errors, but unfortunately my localhost is only being rendered correctly in Firefox -- in Chrome and IE9 they only show the content without any CSS.

I've looked in the developer tools console and I've found the following error messages:

IE

SEC7113: CSS was ignored due to mime type mismatch 

Chrome

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

Firefox doesn't make any of these complaints, however.

What could be causing this error?

Answer 1

Whatever server you're using is not sending a valid Content-Type header to the browser. Without this header, the browser sees the mismatch as a security risk and blocks the download of the file. In this case, the result is unstyled content.

Firefox has no such block, and therefore works as normal.

Answer 2

Aha! Just after I posted this question I spotted the problem: I had an errant .htaccess file higher up in the tree. It was affecting the handling of all JS and CSS files.

Sometimes it helps to write things out logically! :)