Testing sites with Browser Mode vs. Doc Mode

With site developers verifying that their sites run well in IE9 and taking advantage of the new HTML5 capabilities and better performance in IE9’s Standards mode, now is a good time to recap how to use Browser Mode and Document Mode to test sites for IE9 and previous IE versions.

In summary, developers can use IE’s Developer Tool’s Browser Mode menu to test how their site will run in different versions of IE. The Document Mode menu is what developers use to determine the best rendering mode for their site in an IE8 and IE9 browser. As we’ve mentioned before, we want sites to run well in the latest standards document mode - IE9’s standards mode in IE9 and IE8’s standards mode in IE8.

Before diving into more detail, let’s start with an overview of IE’s versioning and compatibility system…

As illustrated above, versioning and compatibility start with Browser Mode. Browser Mode sets how IE will identify itself to web servers and how websites will be handled by default. An important detail to remember is that Browser Mode is chosen before IE requests web content. This means that sites cannot choose a Browser Mode. Instead site developers choose a Document Mode for their site, which overrides IE’s defaults and declares how a website is rendered. If a site does not specify a document mode then IE assumes the default document mode, which is IE9’s standards mode in IE9.

• Developers can change Browser Mode through the “Browser Mode” menu in IE’s F12 Developer Tools. This setting only applies to the developer’s local machine. For example, developers can have IE9 emulate an IE7 browser, IE8 browser or IE9 in Compatibility View.
• Users can change Browser Mode by clicking on the Compatibility View (CV) button, which causes IE8 and IE9 to emulate the IE7 browser. This is why it’s important for site developers to test their site in the Compatibility View Browser Mode.
• IE’s Compat View List can also change the Browser Mode for specific sites.

The Browser Mode determines

• User-Agent (UA) string that IE sends to servers
• Document Mode IE defaults to
• Conditional Comments that IE evaluates

Browser Mode	Description
IE9	IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.
IE9 Compatibility View	IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button.
IE8	IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.
IE7	IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site.

The Document Mode declares what mode IE’s Trident engine will render the markup in such as IE9’s Standards Mode. Changing the Document Mode through IE’s Developer Tools refreshes the page, but does not resend the UA string or retrieve new markup from the server.

As mentioned before, developers declare the document mode that IE will use when rendering their site. The default document mode is IE9’s Standards mode in IE9. Developers can use the doctype and X-UA-Compatible Meta tag or HTTP Header to change that default as they see fit.

• Developers can change the document mode on their local machines for testing with the Developer Tools.
• Users cannot independently change the document mode for a site (users can click on the Compat View button, which changes the document mode to IE7 for the site)
• IE’s Compat View List can change the document mode for specific sites.
• Developers have ultimate control over what document mode their site runs in by declaring a doctype and X-UA-Compatible Meta tag or HTTP Header.

Document Mode	Description
IE9 Standards	This is the latest standards-compliant behavior available in IE9, and is the default mode used by IE9 to render a webpage that has a strict or unknown document type.
IE8 Standards	This behavior matches IE8 when it renders a webpage that has a strict or unknown doctype.
IE7 Standards	This behavior matches IE7 when it renders a webpage that has a strict or unknown doctype.
Quirks	This behavior matches IE when rendering a document with no doctype or a Quirks doctype. It is similar to the behavior of IE5 and the Quirks mode behavior of IE6, IE7 and IE8.

Call to action for site developers:
Blog readers have asked why IE9 has document modes for previous versions and when we’ll remove them. As mentioned in previous posts, we have document modes for the IE versions that developers target. These document modes enable developers to update their sites on their own schedule. As long as developers need document modes to run their sites, we’re going to support them. We want to remove document modes as soon as the web transitions to run in the latest standards mode. The timing is really up to developers.

We want as many sites as possible to run in IE9’s Standards mode, which is the default. Many developers really want this too - to make the most of modern capabilities and better performance across the web platform. The best way for a site to do this is to use a standards doctype and no X-UA-Compatible Meta tag or HTTP header. If you’ve determined that the best document mode for your site is not the default, publish the correct X-UA-Compatible Meta tag or HTTP Header on your site so that users experience your site in the mode it was designed and tested for. If your site isn’t running in IE9’s Standards mode, decide on an update plan and get your site running the same standards-based markup across browsers.

After verifying that your site works well in IE9, use IE Developer Tool’s Browser Mode to verify that your site continues to work well in previous IE versions by changing the menu options to IE7 and IE8. If you find an issue, use feature and behavior detection to get your site running well in IE9 and previous IE versions.

Marc Silbey
Program Manager

Comments

• Anonymous
  October 19, 2010
  I partially agree with Rob, but would have stated it a little more elegantly. As a developer, I target standards, not various IE versions or their document modes. I will test in Firefox, Chrome, and Opera. Generally only IE has problems rendering my pages. If I can determine that my pages are standard compliant and that the problem is only IE, then I will not waste any energy creating a workaround. When customers file such bugs, I send out a response explaining that it is an IE issue and suggest trying another browser, which resolves most issues. That said, so far IE9 is a HUGE improvement over previous versions in regards to standards support. It is not perfect and still has a long way to, but all in all, most of the major problems seem to be fixed. I look forward the final release.

• Anonymous
  October 19, 2010
  I like the developer tools and document modes in IE9.  They let me test a website in IE6, IE7 and IE8 without needing to have those browsers installed.  I used to have to use Windows XP mode to test in IE6.  The only thing I don't like is that the "Done, with errors" icon in the bottom-left corner has gone, so I don't know how to check for Javascript errors anymore.  How do I check for Javascript errors and get a list of the errors in IE9?

• Anonymous
  October 19, 2010
  Compatibility view should be a design/developer only option not advertised as vocally as it is in IE though that damage has been done. I think the vast majority of dealing with different versions of IE are exceptionally over-complicated. Simple object detection (and I'm not talking about laming out by using the user agent in any possible way) is more then enough to load scripting and style sheets for older versions of IE; it's simpler, quicker, and less painful. if (document.getElementById('body').style.scrollbar3dLightColor!=undefined) { if (document.getElementById('body').style.opacity!=undefined) {/* IE9 /} else if (document.getElementById('body').style.msBlockProgression!=undefined) {/ IE8 /} else if (document.getElementById('body').style.msInterpolationMode!=undefined) {/ IE7 /} else if (document.getElementById('body').style.textOverflow!=undefined) {/ IE6 /} else {/ IE 5.5 or lower */} }

• Anonymous
  October 19, 2010
  Can we get a description of how the document mode is determined when the HTML content is within an embedded webcontrol? Seems to be that the document mode is choosen differently - maybe for compatibility reasons?

• Anonymous
  October 19, 2010
  @jabcreations "imple object detection is more then enough to load scripting and style sheets for older versions of IE; it's simpler, quicker, and less painful." For style sheets I'd use conditional comments to serve different stylsheets to IE, as it does not depend on JS.

• Anonymous
  October 19, 2010
  IE6 rendering engine support, pretty please?

• Anonymous
  October 19, 2010
  I can't really say the document mode system has been advertised - you have to open the dev tools first for that (most non-dev users ignore its existence). In fact, the only thing I'd recommend is, the first time the F12 key is pressed, show a warning: "This will open IE's developer tools.If you pressed the key by mistake, click 'Cancel'. To continue, click 'OK'" with a checkbox, unchecked by default, saying "don't ask again". Also, a little trick that may be useful: using the meta X-UA-compatible for IE=edge removes the compatibility view button from the toolbar. While I am not, overall, in favour of using useless meta elements, this one is pretty much unobtrusive and frees the (cluttered) URL bar a little.

• Anonymous
  October 19, 2010
  Don't you think that you should drop support of IE6 and IE7 standarts? As a developer I test my web-sites in IE8 (and now in IE9 beta too), Safari and Firefox. Theese modes make developers lazy. Instead of rewriting code of the web-page to comply latest popular standarts (IE8 which is pretty good) they just put a compatibility string and do nothing else. And this site looks ugly in other browsers. You're trying to force developers to use HTML5 standarts, but at the same tme allow them to use IE6 non-standarts... It's confusing...

• Anonymous
  October 19, 2010
  I think it is great that you allow developers time to transition with backwards compatibility modes. However, please make it up to developers only. It is painful to see that there is still a user oriented compatibility view button in the address bar, that there is still a compatibility list from MS, that it is still the default to display intranet sites in compatibility view, and that it is still possible to put all sites in compatibility view. Please make the choice of IE mode the developer's choice only. That is, only allow it to be changed by doctype, x-ua-compatible and Developer Tools.

• Anonymous
  October 19, 2010
  @David where do I get customers like these? Mine refuse to pay if the site does not work in IE7, IE8 and soon IE9. At least they are OK with not supporting IE6 anymore.

• Anonymous
  October 19, 2010
  @Adrian, @Max - none of these modes allow for IE6 testing.  For those still supporting IE6, my condolences. It is important to note that the browser mode is ONLY a SIMILAR rendering behavior to a previous version of IE.  It in NO WAY WHATSOEVER can be used as a replacement for testing in an actual IE7 install - there are many rendering differences in IE8/IE9 (faking IE7) to a vanilla IE7 install.

• Anonymous
  October 19, 2010
  The comment has been removed

• Anonymous
  October 19, 2010
  this seems to work well... function getIEVersion(odoc){ if (odoc.body.style.scrollbar3dLightColor!=undefined) { if (odoc.body.style.opacity!=undefined) {return 'IE9';} else if (odoc.body.style.msBlockProgression!=undefined) {return 'IE8';} else if (odoc.body.style.msInterpolationMode!=undefined) {return 'IE7';} else if (odoc.body.style.textOverflow!=undefined) {return 'IE6'} else {return 'IE5.5 or lower';} } } but I only tested it in IE9 on Vista and IE Tester. Not the real M'coyIEs or in FX, Chrome or Opera

• Anonymous
  October 19, 2010
  The comment has been removed

• Anonymous
  October 19, 2010
  Are there any plans to support AnimationPNG? The image is a geostationary situation when inspecting it with IE though there is a site where APNG such as Pixiv can be used, too.

• Anonymous
  October 19, 2010
  The comment has been removed

• Anonymous
  October 19, 2010
  @on-kr APNG isn't a W3C standard more like a independent iniative by Mozilla and Opera.  IE will not support it unless it is a MSDN thing or W3C standard.

• Anonymous
  October 20, 2010
  @Adrian: You can view javascript errors through the F12 Developer Tools Console of the Script tab or in the Console tab itself. If you don’t want to keep Dev Tools up, you can get a notified when there is a script error by checking “Display a notification about every script error” in the Advanced tab of Internet Options. You can get to Internet Options by clicking on the gear icon in the upper right corner of IE. @Thomas: Thanks for raising that question. The WebBrowser Control determines the doc mode the same way that IE does because it contains the same web platform (e.g. there is one shared mshtml.dll across IE and WebBrowser Control hosts). The WebBrowser Control does default to the Compatibility View browser mode, which means that the default doc mode is IE7. Here is a blog post with more detail on this: blogs.msdn.com/.../more-ie8-extensibility-improvements.aspx.

• Anonymous
  October 20, 2010
  Interesting that the first Rob's comments were deleted so I'll restate them. Looking through all this shows how IE makes our jobs harder by piling on additional, unnecessary work. That is, work that is not and should not be needed to render things from the web. They add no value other than to make IE fit in with the rest of the modern world. As Rob implied, looking at all this makes me sick to my stomach.

• Anonymous
  October 20, 2010
  No, apng is not a standard but still MS ought to support it all the same (as they ought to put in native browser support for webM too - Google did the right thing here by supporting both video formats - all browsers should do that). Gif belongs at the web-museum next to Pacman and the likes and if enough browsers support apng it will eventually become a standard - a little faster than it seems for now.

• Anonymous
  October 20, 2010
  Why was Rob censored? Did he use profanity or personal attacks? Just making his post disappear doesn't look very good... In regards to CV and so forth... DO NOT WANT!! One step forward, two steps back...

• Anonymous
  October 20, 2010
  Great to know the differences between Browser Mode and Document Mode. What I would like to know is, how can I use IE9s Document Modes (IE7 and IE8) with a tool like Selenium, so that I can test my website in all 3 Document Modes? At the moment, I have different Virtual Machines to solve this problem, but it is really annoying to shutdown and start the next Virtual Machine just for testing puposes.

• Anonymous
  October 20, 2010
  man, you guys could have saved yourselves a lot of work if you had just adopted standards from the beginning.

• Anonymous
  October 20, 2010
  The comment has been removed

• Anonymous
  October 20, 2010
  @Gordon You know that for enterprise solutions Chrome is the worst kind of solution.  They are already going to release Chrome 9 as a Dev build.  The update schedule that Google uses is random and too quick for Business to deal with.

• Anonymous
  October 20, 2010
  @johnnyq3 - And enterprises are still using IE6 so they created their own problems by using IE in the first place. I understand the issue of having to upgrade all those workstations but Chrome auto updates. In any case, we shouldn't diss a browser or software because it advances too rapidly. Unlike IE which advances rarely.

• Anonymous
  October 21, 2010
  The comment has been removed

• Anonymous
  October 21, 2010
  The comment has been removed

• Anonymous
  October 21, 2010
  ieteam, you need to be more humble and forthcoming about your flawed approach to legacy rendering.

• Anonymous
  October 21, 2010
  The comment has been removed

• Anonymous
  October 21, 2010
  The comment has been removed

• Anonymous
  October 21, 2010
  If you feel Mbt shoes look weird, but not necessarily in a bad way. The first thing you'll notice is the extremely thick and curved sole. If you set one of the shoes on the floor, and look at if from the side, you see that the parts of the sole under the toes and the heel do not actually hit the floor. It's the basic make you have a health.

• Anonymous
  October 22, 2010
  @johnnyq3 Here's the quote from W3C: "There is no limit in the Web specifications to the graphical formats that can be used on the Web".

• Anonymous
  October 23, 2010
  The iframe element should follow the css border:none and overflow:hidden to hide the border and scrollbar. frameborder and scrolling are no longer allowed in the HTML 5 spec.

• Anonymous
  October 24, 2010
  This is all very good but we haven't heard when Microsoft is planning to finish adding codec support for HTML5 Video/Audio.  We haven't heard that IE9 will support webM format for video, Ogg Theora for video, and Ogg Vorbis for audio (mp3 too would be ideal). Just finished reading an HTML5 book, and once again, even before HTML5 gets into prime time IE is still holding back the web.

• Anonymous
  October 24, 2010
  @Miller There is no "finish" when it comes to codecs, the browsers add whatever codecs they want.  There is no list of codecs that they complete and then they are done.  It would be great if IE9 supported ogg, but it's not required.  I'd actually love to see more browsers support AAC, but I believe that IE9 is one of the few that does. Oddly enough, you asked IE9 to add mp3 support but they already have it.  It's Opera and Firefox which don't support mp3. Finally, every browser is holding HTML5 back right now because all of them are missing features.  For audio, Opera and Firefox are missing mp3, chrome is  the only one missing wav and safari/ie9 are missing ogg.  Even HTML5 is holding itself back right now because its not finished yet.

• Anonymous
  October 24, 2010
  @MarcSil (re: WebBrowser Control) The problem with using registry entries to select document mode for WebControl is that it applies to the application as a whole. I write plugins for Google SketchUp where you have WebDialog windows to create UIs - it's just a WebBrowser control in a window. But that leads to problems as I want to force a document mode for my instance of the WebBrowser control, not for all of SU's WebBrowser controls as a whole. So, my question is: how do you control the document mode per instance for a WebBrowser control?

• Anonymous
  October 24, 2010
  IE9 always crashes  when i change the document mode to quirks mode at GMail.  see the bug report: 602814

• Anonymous
  October 25, 2010
  @miller Last time I check, Theroa was dropped as a proposed codec, and MS supports a Codec for WebM. @Prior Semblance IE9 supports the ogg codec if you install the oog with the xiph codec pack.

• Anonymous
  October 25, 2010
  JPEG XR SUPPORT NOTE en.wikipedia.org/.../JPEG_XR

• Anonymous
  October 26, 2010
  The comment has been removed

• Anonymous
  October 26, 2010
  The browser mode /and/ the Document Mode determine how Conditional comments are evaluated. connect.microsoft.com/.../conditional-comments-broken "This is the expected behavior for X-UA-Compatible. This switches conditional comments to evaluate as if you're the version of IE specified in the meta tag. The idea is that a web developer has a site they know works in IE7 and which might depend on conditional comments as they evaluated in IE7. X-UA-Compatible is designed to be a simple way to get back the same behavior as IE7. If conditional comments always evaluated to the "true" IE version, many sites would break even though they added X-UA-Compatible."

• Anonymous
  October 26, 2010
  The comment has been removed