Note: While writing this article, IE 10.x released and I upgraded to it. So far, I find it to be far superior to 9.x
You'll be amazed at the terrible weirdness I've uncovered while doing the work. You will be amazed. You will. Now, be amazed! I know. Nothing is amazing any more, because everything's on the Internet.
My First Thought
My first thought is to write a program in C# which implements the WebBrowser control. Easy squeezy lemon peezy. This isn't just laziness. Not just. At this point in our conversation I'd like to alter Occam's Razor for Software Developers. The original philosophy leads us to something like: "when you have two competing theories that make exactly the same predictions, the simpler one is the better." I got that quote at : http://math.ucr.edu/home/baez/physics/General/occam.html which was last updated in 1997.
Occam's Razor For Developers
We Software Developers should say, "when you have two (or more) competing methods in which you could develop the exact same solution , the simpler one is better."
Okay, so create a form and throw a WebBrowser control on there. The WebBrowser control is built into Visual Studio and it just works -- whatever that means. Setting that up in Visual Studio (2010) looks something like the following:
If you need to add the Web Browser Control to your toolbox, you right-click the toolbox list and then it looks something like this:
My Compatibility Test App
Here's what the quick and ugly form I created looks like:
Gratuitous Self Promotion?
I'll show you why that is important along with explaining what all those buttons on my form do. I'll also explain some of the challenges and weirdness of attempting to get the Web Browser control to emulate older browsers.
What Do All Those Buttons Do?
To explain the buttons I've added a table below which shows you the text of each button and the function that each button carries out.
||__Navigates to the URL which is typed into the top edit box
||__Displays the version of the Web Browser control using webcontrol.version: however, it always displays the version of the browser currently installed on your machine, not the compatibility version that is running.
|Check Ver (JS)
||__Runs a script to get the value of
navigator.userAgent. Displays the compatibility mode version that the browser control is running in.
|Create Reg Item
||__Creates a registry entry (requires IECompat app. to be running as admin) which will force the browser into an alternate compatibility mode -- version of IE such as 7.x even though you are running IE 9.x on your computer.**
||__This runs another script to determine if the browser control believes the window.addEventListener method is defined. This method is NOT defined for older IE versions (8.x and before). 9.x and 10.x do support
addEventListener. This makes it a good candidate for determine the compatibility mode of the browser control.
||__This button will Restart the IECompatTest app for you (closing the currently running instance). Once you use the Create Reg Item to create/add the new value -- to alter the Compatibility mode of the browser control -- you have to restart the app. to see the new compatibility mode. That is because when the app. starts it reads the registry entry to determine the compatibility mode it should run in.**
** The two items in the table marked with double-asterisk are dependent upon the information I found at the MSDN blog shown in the next section. That entry explains Microsoft's official stance on how the Compatibility mode and their Web Browser control (supposedly) work.
Stumbled Upon This Blog Entry
Registry Entry? Really?
Basically, the article says if you add a registry entry which references an executable which uses the Web Browser Control, then it will force the Web Browser Control into a specific version.
The registry entry which is added/altered is:
[(HKEY_CURRENT_USER or HKEY_LOCAL_MACHINE)\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\ with a key value of
MyApplication.exe = <int value>
You can see the code I used to add/alter this value on the mainform. It looks like this:
void CreateRegItemButtonClick(object sender, EventArgs e)
Int32 val = Convert.ToInt32(RegItemTextBox.Text);
key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
@"Software\Microsoft\Internet Explorer\Main\FeatureControl\", true);
key = key.CreateSubKey(@"FEATURE_BROWSER_EMULATION",RegistryKeyPermissionCheck.ReadWriteSubTree);
if (key != null)
MessageBox.Show("The key has been altered. Restart the app. to see the changes.");
key.SetValue("IECompatTest.exe", val , Microsoft.Win32.RegistryValueKind.DWord);
catch (Exception ex)
MessageBox.Show(ex.Message + " " + ex.StackTrace);
The MSDN article then goes on to explain the various values which will force the control into specific IE versions.
However, most of it is lies. I could only get the thing to go into IE 7.x mode, using the settings I show in the (2nd) screenshot below.
Now, for brevity, I'll show you two screenshots when running on Win 7 with IE 9.x
First, the natural state of the Web Browser Control running in IE 9.x
Note: addEventListener is supported
Last, the Web Browser Control forced into IE 7.x Mode
Note: addEventListener is no longer supported.
Steps To Use the IECompatTest To Test Your Site's Compatibility
First I'll give you the steps, then I'll show you each step in a series of images.
- Start IECompatTest and check the version of IE installed by pressing the [Check Version] button.
- In our case we'll change the version to IE 7.x so type the value 7000 into the bottom edit box and press the [Create Reg Item] button. This will add the registry value, but now the application needs to be restarted.
- Click the [Restart!] button and the IECompatTest application will close and start again.
- Click the [Check Ver (JS)] button to check the
navigator.userAgent value. Remember, the [Check Version] button will always return the version of the installed IE, not the compatibility mode.
- Now, you can type your URL into the top edit box and click the [Go] button. Your page will be loaded and the browser will run as if it is IE 7.x.
Extra: You can also click the [addEventListener?] button to insure it is in 7.x mode, since that method is NOT supported by 7.x
Steps 3 / 4
Try It Out and Comment
Try it out and see what you think. All this IE compatibility mode stuff is extremely frustrating for web developers and I thought I might just attempt to sort out some of it and provide a resource. Hope this article has helped in some way.
- First release: April 23, 2013