Question

I have an MVC 4 application making use of bundling and minification. The application works 100% correct on IE 11, chrome and other browsers but the style sheets are not rendering when using IE9.

I added the following to my web.config's system.webserver section

<staticContent>
  <remove fileExtension=".css"/>
  <mimeMap fileExtension=".css" mimeType="text/css"/>
</staticContent>

and it seems that the mime type is correct when using IE's developer tools

enter image description here

If the mime type is correct and all stylesheets seems to load, why won't it render?

Side Note: I'm also using Twitter Bootstrap 3 and FontAwesome, not sure if this is causing problems.

UPDATE:

When I use fiddler I can see that the mime type is still set to text/css; charset=utf-8

enter image description here

Was it helpful?

Solution

Ok, eventually found the problem. This was not a problem with the mime type and I hope this will save someone a few hours. IE9 limits the size of css files to about 250kb, because I'm using bundling and minification one of my css bundles were exceeding this limit and the file was truncated, resulting in some of the styles not being applied.

The fix was rather easy, I split my css bundle into two bundles, for example

 bundles.Add(new StyleBundle("~/Bundles/Shared/CSS").Include(
            "~/Content/bootstrap/bootstrap.min.css",
            "~/Content/font-awesome.min.css",
            "~/Content/silviomoreto-bootstrap-select/bootstrap-select.min.css",
            "~/Content/kendo/kendo.common.min.css"));

  bundles.Add(new StyleBundle("~/Bundles/SharedTwo/CSS").Include(
            "~/Content/datepicker/css/datepicker.css",
            "~/Content/kendo/kendo.bootstrap.min.css",
            "~/Content/bootstrap-touchspin-master/libraries/prettify/prettify.css",
            "~/Content/bootstrap-touchspin-master/libraries/prettify/demo.css",
            "~/Content/css/Shared/Index.css"));
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top