Menu
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>
483
In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications.
In Firefox and Opera you can determine if your browser is in "quirks mode" by checking page info. Using document. compatMode , will tell you the mode you are in with most browsers.
Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.
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.
55
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
