JavaScript

Quick IE7 and IE8 Browser Testing

Sam Deering
Share

As we all know testing in IE7 and IE8 can be very exiting! (even at the best of times). I thought I would share a quick way to test if your layouts are broken in IE7 and IE8 if you don’t use a tool or virtual machines. You just need to include the meta tag below directly after the opening head tag.

Here is an example of broken menu found using IE8 Standards mode.

Specifying IE Document Compatibility Modes

You can use document modes to control the way Internet Explorer interprets and displays your webpage.

The X-UA-Compatible header directs Internet Explorer to mimic the behavior of Internet Explorer 8 when determining how to display the webpage. Read more on defining document compatiability.

So your page might look like this:



  
  
  My webpage


  
Content goes here.

IE Dev Tools

If we inspect IE dev tools we can see it’s running in IE8 Standards Document Mode (press F12 to open IE developer tools). From here we can easily switch between the versions but the version we specified in the meta tag becomes the page default.

Why use the meta tag?

You may be thinking why use the meta tag when you can just change the mode in IE dev tools. Well if you are using a conditional to load an IE8 stylesheet the meta tag forces this to be loaded.

IE7

And for IE7 the same thing just use the following meta tag.

More thoughts

Note that I’m pretty sure this will only work when using IE9 (won’t work in FF or Chrome – correct me if i’m wrong there) and you’ll need to do a hard page refresh once you add the meta tag. Also I’m not sure about IE10, I’m yet to have used it!!!