Question

In my development environemnt everything is appearing perfectly fine, I have a pie chart which uses a canvas and animation this appears fine when hosting through the browser.

I am also using Twitter Bootstrap and have a nav bar at the top of the page, which has two items.

Here are some examples:

In development Environment

https://i.stack.imgur.com/TtC5J.png

Hosting in IIS

https://i.stack.imgur.com/DNLkg.png

After dismissing the IIS version, the error remains constant, also you can notice the rounding of the button isn’t quite the same.

We are hosting on IIS6 with default settings so wondering if anything has to be done on the site to encorporate this properly? I’m not registering the .LESS anywhere I don’t think so not sure if that’s what could be causing this.

Thanks in advance.

Answer 1

You need to set the X-UA-Compatible meta tag in order to fix this.
Add the following meta tag to your header in your web page and the problem should be solved

This will make sure it will look the same in development and in IIS. ( using the same browser )

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

You can also add following directive in your web.config to add a custom header application wide instead of the per page meta tag.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=Edge" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

This behavior is caused because IE renders intranet sites in compatibility modus by default. ( because Microsoft thinks a lot of intranet sites are outdated, i guess)
You can modify this by going to Tools –> Compatibility ViewSettings.

References:

• http://weblogs.asp.net/rajbk/archive/2010/05/12/pages-in-ie-render-differently-when-served-through-the-asp-net-development-server-and-production-server.aspx
• http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx