What mode renders an iframe inside Sharepoint 2007 (so, quirks mode)?

StackOverflow https://stackoverflow.com/questions/16367329

Question

I have a site running Sharepoint 2007. SP 2007's master page has no DOCTYPE, hence renders in quirks mode. I have another site embedded in an iframe inside Sharepoint. That site is more modern -- HTML5 DOCTYPE and a X-UA-Compatible meta of IE=Edge.

So, I am trying to understand what mode the iframe contents render in, in various IE browsers.

As best I can tell, in <= IE8, the parent (Sharepoint) will render in quirks mode, and the frame will render in standards mode. Which is what I want.

However, in IE9+, what will happen? The references below seem to think that my frame will start rendering in Quirks mode, which would be bad. What if I put a X-UA-Compatible meta of IE8 in Sharepoint's master, will that give me standards mode back in my iframe?

Edit: In IE10, I tested various configurations of the parent (with doctype and without, and with various metas), and got these results:

  • IE10/doctype/no meta: 10 Standards/10 Standards
  • IE10/no doctype/meta edge: 10 Standards/10 Standards
  • IE10/no doctype/meta 9: 9 Standards/9 Standards
  • IE10/no doctype/meta 8: 8 Standards/8 Standards
  • IE10/no doctype/meta 5: 5 Quirks/8 Standards
  • IE10/no doctype/no meta: 10 Quirks/10 Standards

Some useful links:

IE sometimes makes me want to jump off a bridge.

Was it helpful?

Solution

The iframe will render in the same mode as the containing page, regardless of any meta tags, or doctype settings. I also noticed mixed results when the doc or browser mode is manually changed using the dev tools, so don't rely on that. If you want to be super safe, load a new browser tab whenever you change the doc mode - I don't trust it!

This quick page I did up will give you the compatibilty information you're after: http://stevesspace.com/test/quirks/modern.html

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Inner page</title>
    <style>
        .pass 
        {
            color: green;
        }
        .fail
        {
            color: red;
            font-weight: bold;
        }
        #quirks-mode
        {
            color: #fff;
            color: f00;
        }
        #not-quirks-mode
        {
            color: green;
            color: fff;
        }
    </style>
</head>
<body>
    <div>Quirks Mode: <span id="quirks-mode">true</span><span id="not-quirks-mode">false</span></div>
    <div>Javascript: <span id="scripts-enabled" class="fail">false</span></div>
    <div>Array map support: <span id="array-map" class="fail">false</span></div>
    <hr />
    <div>Doc Mode: <span id="doc-mode"></span></div>
    <div>Compat Mode: <span id="compat-mode"></span></div>
    <hr />
    <div>SVG Circle should render below</div>
    <svg>
        <circle cx="50" cy="50" r="50" style="fill: green;"/>
    </svg>
</body>
<script type="text/javascript">
    document.getElementById('doc-mode').innerHTML += document.documentMode;
    document.getElementById('compat-mode').innerHTML += document.compatMode;

    document.getElementById('scripts-enabled').innerHTML = 'true';
    document.getElementById('scripts-enabled').className = 'pass';

    if (Array.prototype.map) {
        document.getElementById('array-map').innerHTML = 'true';
        document.getElementById('array-map').className = 'pass';
    }
    </script>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top