Defining Document Compatibility In Internet Explorer 8

The procedures to define document compatibility in Internet Explorer 8 are well documented here, but I’ve seem many developers and system administrators that are not aware of this.

Although you can (and should) define the document compatibility your web pages were designed to, if you don’t, Internet Explorer 8 and the Web Browser Control will default to these compatibility modes:

If you notice the table above, by default, only Internet Explore 8 will present itself to the as Internet Explorer 8 and only to Internet sites.

The way Internet Explorer (and any other browser) presents itself the web servers is using its user agent string:

(If you are curious about the history of the user-agent string, read the History of the user-agent string)

Microsoft did this to keep compatibility with legacy applications used by enterprises (large and small) but this brings a few issues to development and testing.

If you are building a public web site for Internet Explorer 8, you might see the right thing on your development machine, but the quality assurance team will see the site as if it were an Internet Explorer 7 if the version they are testing is on the intranet. If the the web site you are developing is going to be accessed from an application hosting the Web Browser Control and you don’t test on that application, you are not going to see the same thing.

To know how is your browser presenting itself to the web server in the internet, there are several web sites that will show information about the user-agent string (like http://www.useragents.org/) and it helps to have the same thing in your intranet. If you want to build such a web application using ASP.NET, you can use the UserAgent property of the HttpRequest class (or the Browser property for more detailed information).

This type of information is also available in Internet Explorer in the navigator object.

Giorgio Sardo has a few functions to detect Internet Explorer 8 but you might also want to develop a diagnostics page (or part) to show the web browser features, something like this:

<fieldset id="webBrowserInfo">
    <legend>Web Browser</legend>
    <table border="1">
        <tr>
            <td class="label" style="width: 100px"><label for="webBrowser$userAgent">userAgent</label> </td>
            <td class="value" colspan="3"><span id="webBrowser$userAgent"></span></td>
        </tr>
        <tr>
            <td class="label" style="width: 100px"><label for="webBrowser$appVersion">appVersion</label></td>
            <td class="value"><span id="webBrowser$appVersion"></span></td>
            <td class="label"><label for="webBrowser$appMinorVersion">appMinorVersion</label></td>
            <td class="value"><span id="webBrowser$appMinorVersion"></span></td>
        </tr>
        <tr>
            <td class="label" style="width: 100px"><label for="webBrowser$appCodeName" style="width: 600px">appCodeName</label></td>
            <td class="value" colspan="3"><span id="webBrowser$appCodeName"></span></td>
        </tr>
        <tr>
            <td class="label"><label for="webBrowser$appName">appName</label></td>
            <td class="value" colspan="3"><span id="webBrowser$appName"></span></td>
        </tr>
        <tr>
            <td class="label" style="width: 100px"><label for="webBrowser$userLanguage">userLanguage</label></td>
            <td class="value"><span id="webBrowser$userLanguage"></span></td>
            <td class="label" style="width: 100px"><label for="webBrowser$cpuClass">cpuClass</label></td>
            <td class="value"><span id="webBrowser$cpuClass"></span></td>
        </tr>
        <tr>
            <td class="label"><label for="webBrowser$systemLanguage">systemLanguage</label></td>
            <td class="value"><span id="webBrowser$systemLanguage"></span></td>
            <td class="label"><label for="webBrowser$platform">platform</label></td>
            <td class="value"><span id="webBrowser$platform"></span></td>
        </tr>
        <tr>
            <td class="label"><label for="webBrowser$browserLanguage">browserLanguage</label></td>
            <td class="value"><span id="webBrowser$browserLanguage"></span></td>
            <td class="label" style="width: 100px"><label for="webBrowser$cookieEnabled">cookieEnabled</label></td>
            <td class="value" colspan="5"><span id="webBrowser$cookieEnabled"></span></td>
        </tr>
    </table>
</fieldset>

<script type="text/javascript">
    document.getElementById("webBrowser$userAgent").innerHTML = window.navigator.userAgent;
    document.getElementById("webBrowser$appCodeName").innerHTML = window.navigator.appCodeName;
    document.getElementById("webBrowser$appMinorVersion").innerHTML = window.navigator.appMinorVersion;
    document.getElementById("webBrowser$appName").innerHTML = window.navigator.appName;
    document.getElementById("webBrowser$appVersion").innerHTML = window.navigator.appVersion;
    document.getElementById("webBrowser$browserLanguage").innerHTML = window.navigator.browserLanguage;
    document.getElementById("webBrowser$cookieEnabled").innerHTML = window.navigator.cookieEnabled;
    document.getElementById("webBrowser$cpuClass").innerHTML = window.navigator.cpuClass;
    document.getElementById("webBrowser$platform").innerHTML = window.navigator.platform;
    document.getElementById("webBrowser$systemLanguage").innerHTML = window.navigator.systemLanguage;
    document.getElementById("webBrowser$userLanguage").innerHTML = window.navigator.userLanguage;
</script>