CODEWITHSUNDEEP
htmlinternet-explorer-8ie8-compatibility-mode
mtyson
mtyson

Reputation: 8550

What specific things cause IE8 to trigger compatibility mode?

I've got an app that under some circumstances causes IE8 to popup the compatibility message and reload in compat mode:

a problem displaying caused internet explorer to refresh the webpage using compatibility view

This is rare, and does not occur due to the meta-tags, as far as I can tell. It happens as a response to user action that alters the DOM. This is the same problem as: https://superuser.com/questions/215281/how-do-i-stop-i-e-jumping-into-compatability-view, but my question is: What types of things cause this, as an aid in fixing it.

Put another way, see this site thesitewizard.com, where a third cause of compatibility mode in IE8 is described as:

and, on occasion, for some other unfathomable, undocumented reason, on pages that are validated as standards-compliant (or, at least, it does this in Release Candidate 1).

And the question is: What unfathomable, undocumented reasons?

Upvotes: 32

Views: 11757

Answers (4)

doubleswirve
doubleswirve

Reputation: 1428

I know this is an old question, but I figured I would add something that I just came across. I was having an issue where compatibility mode was being forced and I couldn't track down the source. I manually took the page out of compatibility mode and noticed that some characters were not showing up. It ended up being a bulleted list that was using a custom character on a pseudo element:

li:before {
  content: '\25B6';
}

As a quick fix, I ended up just overwriting this for IE less than 9:

.lt-ie9 li:before {
  content: '';
}

This article gave me the idea to look for mishandled characters. Hope this helps somebody if they stumble upon a similar issue!

Upvotes: 2

Piemol
Piemol

Reputation: 896

I know you allready have your answer, but today I've been searching too what was causing IE8 to trigger compatibility mode. I searched for JavaScript code, css (:first, :last, etc) but it appeared to be some inline style:

max-height in combination with overflow..

So this (also) triggers compatibility mode in IE8:

style="overflow:scroll;max-height:200px;"

And this not, so it solved my problem:

style="overflow:scroll;height:200px;"

Edit: I think this is related: IE8 overflow:auto with max-height

Upvotes: 5

jessegavin
jessegavin

Reputation: 75650

The following content comes from an MSDN article "Controlling default rendering".

Be aware that certain conditions, like those listed here, can force Internet Explorer to display pages in a document compatibility mode different from the one specified in the webpage.

  • Compatibility View is enabled for the page.
  • The page is loaded in the Intranet zone and Internet Explorer is configured to use Compatibility View for pages loaded from the Internet zone.
  • The page is loaded from the user's local file system (which means the page is loaded in the Intranet zone) and Internet Explorer is configured to use Compatibility View for pages loaded from the Internet zone.
  • Internet Explorer is configured to display all websites in Compatibility View.
  • Internet Explorer is configured to use the Compatibility View List, which specifies a set of websites that are always displayed in Compatibility View.
  • The Developer Tools are used to override the settings specified in the webpage.
  • The webpage encountered a page layout error and Internet Explorer is configured to automatically recover from such errors by reopening the page in Compatibility View.
  • The page contains a Mark of the Web that directs it to be loaded in a particular zone.

These links provide additional info that describes how Internet Explorer determines the appropriate document mode for a webpage:

Upvotes: 5

mtyson
mtyson

Reputation: 8550

After a long debugging session (using old school alerts to pinpoint what was failing where), this seemingly innocous line of dom manipulation was the culprit:

document.getElementById("literal"+varValue).style.display = "none";

There was no error here, and the element was apparently found (ie, this is not a garden variety null pointer).

This is a large scale app, and there is a lot going on around this code. I switched it to the following, and this apparently has prevented the issue:

setTimeout(function(){
           var layoutEl = document.getElementById("literal"+varValue);
           if (layoutEl)
               layoutEl.style.display = "none";
       },10)

Upvotes: 7

Related Questions