Document Mode IE7 and IE8 standard does not render correctly

Question

I am trying to figure out why my page is not rendering correctly.

I have noticed that when my page is displayed with "Document Mode: IE7 standards" or "Document Mode: IE8 standards", the page does not render correctly in the browser. It seems to have a problem with the page navigation as shown here:

When I change to "Document Mode: IE9 standards", the page displays correctly as follows:

Any idea how I can fix this? Thank you.

Answer 1

Your code is clearly using some CSS styles or other browser features that are not supported by IE8 or IE7.

You haven't given us any code, so I can't tell you exactly what those features are, but if you need to support these older browsers, then you'll need to work out some way around this.

The first thing: You mention that you're seeing this in IE9 compatibility modes. If you don't need to support IE7/8, you can prevent IE9 from going into compatibility mode by specifying the x-ua-compatible meta tag, as follows:

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

This will force IE to run in the best possible rendering mode available to it. So IE9 will use IE9 standards mode, and not the compatibility modes.

However, if you do need to support IE7 and IE8, you'll need to do one of the following things:

• Fix your code to work with the browser.
• Fix the browser to work with your code.

As mentioned, you haven't provided your code, so I can't help you with the first point, but the second option might be worth considering.

There are a large number of Javascript hacks aimed at emulating newer browser features in older browsers -- particularly for IE. These hacks are known as 'polyfills', and you can find a fairly comprehensive list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

If you can work out which browser feature(s) it is that is breaking your code, you can implement the relevant polyfill(s) into your code, and hopefully things will suddenly start working. Different polyfills work in very different ways, so I can't really give any more help than that without knowing more specifics, but most of them have good enough documentation to get you started.

Finally, one note of caution: If you're testing that your site works in IE7/8 using IE9's compatibility modes, be careful -- there are a number of known issues with the compatibility modes that result in them not working exactly the same as a real copy of IE7 or IE8. You cannot be absolutely certain that your code is working in these browsers without seeing it in the real thing. Compatibility mode is not good enough to be sure.

Hope that helps.

Answer 2

Each version of Internet Explorer has a completely different level of support for the then current standards. In general each later version has a better and bit more complete implementation of the then current standards, however, IE is very well renowned for either, missing, incomplete, or incorrect standards implementation.

As you change your display settings to reflect older versions you are also losing an new support that the more current versions would have. For example IE7 does not have support for CSS3 features and as such will not correctly display those features.

Do not forget that the idea behind being able to switch to an older Document Mode is two fold. For the average user it is to be able to correctly display a page that was designed with the older browser specifically in mind (like back when it was the current browser). For developers/webmasters it is to test support for users that may still be on older machines that are still running the older versions of the browser.

Also note that if you need more specific help then this you may wish to either edit in your code or supply a link using a site like JSFIDDLE.net