[Browser Mode vs Document Mode] - ?s on using IE Dev tools to test for IE7-9

Whats good Sitepointers?
I have a large, old, and rather complex site that I’ve inherited which I’m slowly working on renovating. I’ve made some fairly dramatic CSS and HTML changes to the UI - which need to work in all modern browsers plus IE 7-9.

In using IE Web Dev Tools (in IE10) I’d like to get some input on the best way to test for older versions of IE, and the Browser Mode and Document Modes are a bit confusing. What is the best way, or combination of Browser & Document Modes to test for each version of IE?

Here is the current Doctype and meta info:


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


<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


Different combinations of browser and doc modes render differently. What is the best combination to use for each version of IE with the code snippet above?

Thanks!
:confused:

It depends on how long you expect it to take to complete transitioning from HTML 3.2 to HTML 4. It has been 16 years now since HTML 4 became a standard so most sites ought to be close to completing the transition by now and once all the HTML 3.2 tags have been replaced you can switch to using the HTML 4 strict doctype.

I can appreciate that Stephen, and thanks for responding! Ideally I’d love to switch to an HTML5 site… alas, that’s not going to be possible with this particular site. I’m still unsure about the best way to test legacy versions of IE inside of IE Dev tools using Document and Browser modes… Or perhaps there is something I’m missing altogether?

Hi GOLGO-13,
“Ideally I’d love to switch to an HTML5 site… alas, that’s not going to be possible with this particular site.”
This doesn’t mean you cannot use the html5 doctype (<!doctype html>), which is backwards compatible and is always the html-strict (pure standards) mode; i.e. as long as you don’t use the special htlm5 tags and features it will work in all IE-versions above IE5.5.
As far as I know, the following things are happening.

For the best cross-browser results a strict doctype is recommended: the html5 doctype or the strict variants of html4.01 or xhtml1.0 ([U]see here[/U]).

If this is impossible in your case (too much work or other ways; f.i. use of the target attribute ), you can use the XHTML 1.0 Transitional variant as well.

[LIST]
[*]With setting the html-validator option (by hand) on the strict doctype, you can try to get the code as much strict as possible: that doesn’t hurt.[/LIST]
“IE=edge” tells Internet Explorer to use the highest rendering mode available for the version of IE of the visitor: that will be o.k.

All this will be the “Document Mode”. Once chosen, you have nothing to do with it.

With the “Browser Mode” button you can test (simulate) the results as if it was an older IE-version.

  • If something is not supported in a certain IE-version (for example a css rule), you can try to find a workaround and make a Conditional Comment to serve this version.

Some more info at MSDN: [U]Testing sites with Browser Mode vs. Doc Mode[/U]

Unfortunately, the browser modes don’t replicate earlier version of the browsers very well at all as they miss a lot the important bugs in those earlier versions. It’s ok as a rough guide but can’t be relied on 100%.

I use the browser mode as a quick check but then I also use ietester to check the css rendering as it is 99% accurate for css although its crashes a lot but just starts up again with no problem. For better testing I keep IE7 on my old laptop so it runs natively and IE8 on a spare computer (I run ie10 on my main computer). These days though we are very close to dropping support for IE7 and under so things are becoming easier.

Some people like to load Virtual machines so that they can run multiple browsers but even then I have seen them give incorrect (different) results because the versions they install aren’t the same as most people have with all the updates and fixes applied.

Just to note, nothing about a Virtual Machine would necessarily prevent one from accepting updates. However I personally have disabled Windows updates simply to preserve my browsers (IE7 doesn’t remain on your machine if you allow complete automatic updates, MS wants you to upgrade to 8, and so on).