Trying to use IE=edge X-UA-Compatible in an iframe on a page using IE=EmulateIE7
I have a page that's going to be included in an iframe on a page where they use the following:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
and ideally I'd like to render my page in using the latest standards mode available to the browser the user is using. Is this possible?
I've tried including
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
on my page, as well as altering my webapp to include the 'X-UA-Compatible' HTTP header with value of 'IE=edge', but I can't seem to get it to do what I want.
The odd thing is, is that if for instance I have two pages, the first containing the iframe and the other being what's displayed in the iframe, like so:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script>
console.log("Page document mode: "+document.documentMode);
</script>
</head>
<body>
<iframe src="iframepage.html" />
</body>
</html>
and
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
console.log("Iframe document mode: "+document.documentMode);
</script>
</head>
<body>
</body>
</html>
The output is the rather unexpected
Page document mode: 7
Iframe document mode: 8
Where has the document mode 8 come from? And how do I make the iframe document into 9 or above??
I'd be eternally grateful if someone can point me in the right direction!! thanks, Nick
Answer
IE does not allow mixing IE9+ and older modes in a frame hierarchy. If your top document is IE7, the highest you can get in any inner document is IE8. Similarly, you wouldn't be able to host anything but IE9 mode docs inside an IE9 mode page.