Introduction to Mat Wright

Mat Wright is a Zend Certified Engineer and qualified designer available for freelance web development + consultation work.

Tuesday, February 15, 2011

Internet Explorer 9 Compatibility Quick Fix

The latest version of the Microsoft web browser - Internet Explorer was released to the public this week - Internet Explorer 9.

Whilst the Beta version has been available for some time many developers have found it quite a challenge keeping up with the varying api changes as development has advanced and some javascript libraries appear to have suspended compatibility testing until the first release candidate.

Well ready or not, the first release candidate of IE9 is here and readily available to the general public.

Here are just some of the new features to be added to IE9:

  • HTML 5 (Working Draft)*
  • W3C Cascading Style Sheets Level 3 Specification (Working Draft)
  • Scalable Vector Graphics (SVG) 1.0 Specification

Your website isn't IE9 Compatible ?

If you've just downloaded IE9 RC and found that your website no longer works or the layout has become skewed, don't panic!

Whilst you continue working on the updates needed to meet IE9 compatibility you can add some code to the pages concerned or even the entire site in order to force IE 9 to display your page(s) in a previous version compatibility mode.

By default IE 9 will read your web page DOCTYPE to determine the compatibility mode in which to render the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If your web page doesn't include a DOCTYPE or you need to over-ride the default IE9 behaviour you can do this in a number of ways;


1. Add a meta tag to the page(s) you wish IE9 to render in a previous compatibility mode:

To emulate IE8 mode use :

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

To emulate IE7 mode use :

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

and so on.

If you are able to edit or add additional HTTP headers to be output by your web application then perhaps the best method method is to use the X-UA-Compatible header:


Apache 2.2

First, you need to make sure that the headers_module is loaded during server initialization. In the httpd.conf file, uncomment the line by removing the “#” at the start of the LoadModule line for headers_module.  When complete, it should readas below.
LoadModule headers_module modules/mod_headers.so

To add the header to all pages on the server, add thefollowing line to the httpd.conf file after the LoadModule lines.
Header set X-UA-Compatible “IE=EmulateIE8”

PHP

Use the header() function  to send a custom header. This function MUST be called before any other output is started.

//set IE mode header
header('X-UA-Compatible: IE=EmulateIE8');


This will then automatically cue Internet Explorer 9 to use the desired Compatibility settings so that your web application continues to generate web pages which are correctly displayed even in the latest version of Internet Explorer while you work on the long-term compatibility updates.

20 comments:

  1. Nice post.

    I was wondering if you'd be interested in some content collaboration for DZone.com. If you see this comment (I couldn't find a contact email on this site) send me an email at mitch [at] dzone [dot] com.

    ReplyDelete
  2. Does similar functionality exist for forcing Firefox to emulate older verions? I want something like:
    content="FF=EmulateFF2"

    Appreciate your help

    ReplyDelete
  3. Thank you, I would like to say to it`s nice post for blog.

    ReplyDelete
  4. Nice simple, helpful post, with a common sense solution to a common problem. Thank you for that!

    When some of my sites were messed up with IE9 I searched for solutions and, frankly, came to the conclusion that I must be some kind of totally incompetent freak, possibly borderline criminal, for not having perfect sites that have worked perfectly without a single modification from IE2 - IE9. That's what the Great Coding Gods claim is their experience!! There are a lot of them touting their lies and their egos on the forums! Because actually IE9 is a piece of rubbish, basically, that does not behave in any kind of predictable way. That is the Common Sense view, in my opinion. The Great Coding Gods, however, will continue to pretend that there is no problem, so they don't lose face...

    I slapped in Emulate-IE8 and all is well with the world once more. And I don't care who sees it!

    ReplyDelete
  5. I seriously love you!!! You just saved a weeks frustration and a brick from being thrown at my laptop to relieve that stress of ie9 throwing my website off

    ReplyDelete
  6. Microsoft have skipped a key piece of space saving, which is to use every bit of place for something. Getting products out of the UI is excellent, but it's useless if you don't use all the place you have got.

    ReplyDelete
  7. i need the reverse: disable compatibility mode
    some pages have the correct source but do not display correclty in compatibility mode
    html validation shows no errors

    ReplyDelete
  8. I tried to set this meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"
    in the head-Tag in the first page of my jsp application. But i didnt work for me. i checked the mode with alert(document.documentMode) but it always displays 9. The app runs on Weblogic11g. Any idea?

    ReplyDelete
  9. Hey Hi Mat,

    It is a great help for me, I was finding developer and was happy to pay them but no one could help me out to fix ie9 issue only Your blog helps me.

    Thanks
    Deepak

    ReplyDelete
  10. Thanks mate, would someone just burn IE? whats its purpose exactly? Chrome rules.

    ReplyDelete
  11. ah that little bugger was making me crazy!! thanks so much! my local dev was working fine with the .htaccess and my php file, but online i would get the icon, adding the header did the trick!

    ReplyDelete
  12. great help!!! thanks

    ReplyDelete
  13. Mat, Thanks a lot..! Worked like a charm after adding it in apache server...days months took to resolve ie9 a4j issue..Thank u once again...:-)

    ReplyDelete