HTML5 Website Refuses To Display Correctly In Internet Explorer

Image may be NSFW.
Clik here to view.

A developer I work with ran into an interesting issue he threw my direction the other day with a very surprising solution.  He had just published a new website using ASP.NET MVC4 and Bootstrap 3.  I’m not sure which functionality required .NET 4.5, but the server he originally published it to wasn’t upgraded to support .NET 4.5 and adjusting the WEB.CONFIG to support only .NET 4.0 caused failures.

We upgraded IIS on his server to support .NET 4.5 and that problem went away.  He emailed me a link and asked me to take a look at his site first in Chrome and then in Internet Explorer.  I did as asked and saw a beautifully designed responsive site in Chrome and something “less than beautiful” in Internet Explorer.

We opened up Internet Explorer developer tools and inspected each element that was behaving oddly only to find that incorrect CSS classes were being applied.  But only in Internet Explorer.  Now I know that IE has it’s “quirks”, especially when using HTML5 and CSS3, but quite a few of those quirks went away in IE 10.

We beat our heads against the wall for a few hours until we accidentally surfed to the page using an external address like http://www.somesite.com instead of \\someserver and guess what?  The site loaded perfectly!  It turns out that IE10 has an “interesting” option to default to “compatibility mode” when viewing sites on local domain related IP address ranges.  But rather than adjust that option in each user’s IE settings, there is a great way to override that setting in the WEB.CONFIG file.  Here is that code:

<system.webServer>

<httpProtocol>

<customHeaders>

<clear />

<add name=”X-UA-Compatible” value=”IE=edge,chrome=1″ />

</customHeaders>

</httpProtocol>

</system.webServer>

Enjoy this solution as it wasted several hours of our time trying to track it down.

Capt. Rochefort

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.