Author: Steven Neiland
Published:

Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

Our main web app in work has always been designed to work for IE8 and above but on occasion we have users turning on compatibility mode on Internet Explorer by mistake. When this happens some visual elements invariable get screwed up and we have to explain to the user how to find and turn off the feature.

While it doesn't happen often I decided to come up with a solution to the problem after I had to physically walk up to a users desk to click on the broken page icon to turn it off for them. After some quick googling I discovered you can actually disable this button from the server side.

Meta Tag

The most common solution put forward and the the first one I tried is to put a "X-UA-Compatible" meta tag in the html immediately after the opening head tag.

Supposedly this tells the internet explorer which mode is best for rendering the website with the content attribute value "IE=edge" always being the most recent version. A complete listing of all the different values can be found here.

<!DOCTYPE html>
<html>
      <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            ...snip
      </head>
      <body>
            ...snip
      </body>
</html>

As you can probably tell this did not work at all for me.

IIS

The solution turned out not to be too different. Instead of added a meta tag to the site code I added a custom header through the web.config file like this.

<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=edge" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

Apache

You can also achieve the same results from Apache. First make sure you have the "mod_headers" and "mod_rewrite" modules installed and enabled on apache.

With these setup you just add the following line of code to your .htaccess file.

Header set X-UA-Compatible IE=Edge

In Code

You can also do this through your favorite server side language (although I have not tested these).

ColdFusion

<cfheader name="X-UA-Compatible" value="IE=edge">

PHP

if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false)) {
      header('X-UA-Compatible: IE=edge');
}

What Do You Think?

Reader Comments

aniket's Gravatar
aniket
Tuesday, November 8, 2016 at 7:26:24 AM EST

Is there any way by which I can do same in JBoss server-side setting(like Apache). Thanks!

Steven Neiland's Gravatar
Steven Neiland
Thursday, December 1, 2016 at 9:00:14 PM EST

@anikey,
Im not a JBoss expert but this should do
https://lmgtfy.com/?q=jboss+set+header

Post a Comment

Comment Etiquette:

  • Please keep comments on-topic.
  • Please do not post unrelated questions or large chunks of code.
  • Please do not engage in flaming/abusive behaviour.
  • Comments that contain or appear to be advertisments, will not be published.
  • Comments that appear to be created for the purpose of linkbuilding to commercial sites will be removed.

We are all adults here so play nice.

*
*



Archives Blog Listing

Tag Listing

Learn CF In A Week

Treehouse

 
Fork me on GitHub