Why is css missing after refreshing on IE9?

Question

I am having an issue that is only happening on Browser Mode:IE9.

If I switch Browser Mode to any other browser it works fine.

This is what happens: When I arrive on the page, the CSS is there and everything looks fine. However if I refresh the CSS goes away and I lose my styling. If I click to anywhere else on my site then the CSS is still there. This only happens on my site that is hosted locally.

Answer 1

This sounds like if the css file is loaded from cache when you navigate normally, but fails to load when it has to be reloaded because you refresh the page. This would mean that it has existed before, but now is inaccessible. Did you try opening the css url in browser?

Answer 2

If anyone is having this issue, the solution is to remove the following from the staticContent section in the web.config:

  <remove fileExtension=".css" />
  <mimeMap fileExtension=".css" mimeType="text/css; charset=UTF-8" />
  <remove fileExtension=".js" />
  <mimeMap fileExtension=".js" mimeType="text/javascript; charset=UTF-8" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
  <remove fileExtension=".rss" />
  <mimeMap fileExtension=".rss" mimeType="application/rss+xml; charset=UTF-8" />
  <remove fileExtension=".html" />
  <mimeMap fileExtension=".html" mimeType="text/html; charset=UTF-8" />
  <remove fileExtension=".xml" />
  <mimeMap fileExtension=".xml" mimeType="application/xml; charset=UTF-8" />

For some reason IE9 thinks the mimeType is invalid when the charset=UTF-8.