Controlling how IE9 renders pages

With Internet Explorer 9 Microsoft have made some changes to how it renders which end-users may find noticable. Previously in Internet Explorer 7 and 8 it didn't matter, nor was detectable to an end-user if IE was rendering a page in quirks mode or in standards mode.

Internet Explorer 9 however has removed the 2 pixel border that previously versions of Internet Explorer had.

IE9 rendering a page as IE8IE9 rendering a page in standards mode

On the left IE9 is rendering a page as IE8 would. As such the border is included to maintain compatibility. However on the right we can see IE9 rendering a page by default, with no border.

Web developers can control how Internet Explorer renders a page using the Doctype and also the X-UA-Compatible tag.

The Doctype is probably the most common way. No DocType, Internet Explorer will render a page as IE6 would, dubbed quirks mode. This will result in the 2 pixel border around your website.

Using a Doctype such as the new HTML5 one <!DOCTYPE html>, or one of the XHTML or HTML ones should work fine.

Alternatively you can also use the X-UA-Compatible tag in the page's header. This has the added advantage of removing the compatibility button. If you're confident a webpage will be correctly displayed to a visitor, why pollute thier screen with an option that isn't needed.

You can use <meta http-equiv="X-UA-Compatible" content="IE=9" /> to remove the button. IE7, 8 and 9 will all render the page as close to standards as they can. However if IE10 was released, it would switch to compatibility mode for IE9. You can get around this by specifying "edge" instead of a version number.

No feedback yet