Question

I'm working on setting up a page and am having difficulty with getting it to look well across browsers (actually just IE, as it renders properly for mozilla and webkit). I'm wanting to rule out quirks mode before seriously considering old IE bugs fixed since IE6. The container page has a declared doctype, however the iframe code does not. Will the iframe content be rendered in quirks-mode (because it does not have a doctype) or standards mode (because the container has a doctype)? The source follows this scheme:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
...
<body>
...
<iframe ...>
    <html>
    <head>
    ...
    </head>
    <body>
    ....
    </body>
    </html>
</iframe>
...
</body>
</html>
Was it helpful?

Solution


CAVEAT EMPTOR

As some have sadly failed to notice this answer was posted and accepted quite a long time before IE9 existed which changes the terms of the question. I would normally have deleted this to avoid catching any more downvotes but since the answer is actually still true and sadly relevant to a substantial portion of the browser demographics, I'll leave it up. Just please don't downvote it any more.


Quirksmode: IE renders iframes as separate document nodes, doctype is not inherited, and quirks is the default.

Edit: somebody else's demonstration of your problem and proof of non-inheritance (with thanks to my bookmarks :P )

However, you've chosen "Almost" as your doctype which means iframes aren't allowed anyway. The only way you could get valid iframes is if the parent was in quirks which makes inheritance or not a moot point.

Recommended reading.

OTHER TIPS

Prior to IE9, the webpage within the iframe would render according to its own doctype, not according to the doctype of the parent container. However, in IE9, Microsoft changed the behavior so that the child iframe inherits its doctype/rendering from the parent container.

Note that IE9 will still behave in the traditional manner (iframe honors its own doctype) whenever compatibility view is used.

The best workaround for folks in your situation--writing a standards compliant container page but needing to include an iframe with a quirks mode page--is to add either of the following meta tags between your doctype and the opening tag in the parent page.

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

These tags will essentially tell IE9 to pretend it is IE7 or IE8. Including in the emulation is the logic used to determine rendering mode for the child iframe. The downside of this workaround is that you will not be able to use any of the new features supported by IE9 in your parent page, but that is probably preferable to massive rendering errors in the child page.

See http://web.archive.org/web/20110905060718/http://www.sitepoint.com/forums/html-xhtml-52/ie9-iframes-doctypes-you-743000.html for more information.

See my answer here for MSDN-documented solution for IE9: How to force Iframe to run quirks under a standard parent frame

In short, it is not possible to trigger quirks mode in an iframe if the parent page is rendering in IE9 mode, but it is possible to trigger "quirks mode emulation" embedded in the IE9 rendering engine.

JSBin demo: http://jsbin.com/ozejuk/1/

Further reading: http://msdn.microsoft.com/en-us/library/gg558056(v=vs.85).aspx

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top