CODEWITHSUNDEEP
internet-explorer-11ie8-compatibility-mode
phatfingers
phatfingers

Reputation: 10250

Unable to override IE8 compatibility mode in IE11

My goal is to support HTML5 on IE11 browsers whose users have their compatibility mode set to IE8 to support a legacy web app (e.g. on a corporate intranet). I want to basically turn off that compatibility mode setting when they access my site.

I've read through numerous similar discussions described in S.O, some of which appear to have solved the problem at the time. All seem to point to either an "X-UA-Compatible" META tag, or a similar Header. I've tried both. Neither has worked for me. I'm including a test page I'm using, as well as the response headers reported by my browser (IE 11.916.10586.0 running in document mode 8).

My test page displays the JavaScript value document.documentMode, and also displays a DIV with a rounded border using CSS3 effects not available in IE8.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Compatibility</title>
<style>
div { padding: 10px; border: 1px solid #123; border-radius: 10px }
</style>
</head>
<body>
<p>documentMode=<span id="documentMode"></span>
<p>compatMode=<span id="compatMode"></span>
<div>Rounded</div>
<script>
document.getElementById("documentMode").innerHTML=document.documentMode;
document.getElementById("compatMode").innerHTML=document.compatMode;
</script>
</body>
</html>

Output currently looks like this on IE11 browser in IE8 compatibility mode:

Not rounded

The response headers reported by the Network Settings tab include:

X-UA-Compatible: IE=edge

If any solution works, I would expect to see rounded borders around the word "Rounded" in an IE11 browser configured for documentMode 8. Currently, I see square borders. Is there anything I can do to fix this on my (app/server) end?

Upvotes: 1

Views: 1027

Answers (2)

phatfingers
phatfingers

Reputation: 10250

If a parent page sets its "X-UA-Compatible" mode to IE8, then a page running in an IFRAME under that page will inherit that setting. Adding the meta tag:

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

will not override an X-UA-Compatible meta tag from a frame's parent. When it's needed (i.e. when a parent page has set content="IE=8", a local content="IE=edge" doesn't work. I think the only use case for setting IE=edge is to tell the system to ignore the X-UA-Compatible meta tags of child iframes.

If your page is forced into IE=8 mode because the user opened his/her "F12 Developer Tools" and manually selected Document Mode 8 (IE8 mode), then that mode overrides whatever settings were specified or inherited for that page for as long as the Developer Tools remain open. Closing "F12 Developer Tools" will revert the page back to its normal settings.

Upvotes: 0

AlThor
AlThor

Reputation: 11

The code you provided is correct. A test run in IE renders in IE11 mode on my machine. I have run across times in which IE gets stuck in a document mode if you have the debugger open on the page refresh.

It also wouldn't hurt to ensure the latest version of IE is installed.

Upvotes: 1

Related Questions