11

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>
Bartłomiej Mucha
  • 2,762
  • 1
  • 30
  • 36
Christopher
  • 113
  • 1
  • 1
  • 4

3 Answers3

23

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.

Doug WB
  • 340
  • 6
  • 14
mikepr
  • 663
  • 8
  • 14
  • is there any other slution that enable executing parent IE9 standards mode Frame along with quirks or EmulateIE7 child iframe? – Tal Jul 30 '12 at 15:20
  • @mikepr: Preferable ? No, it isn't. Fact is, you shouldn't produce HTML with quirks mode - ever. Some important MS products do btw, with no workaround... – Stefan Steiger Sep 05 '12 at 08:33
  • 4
    Oh and by the way: Stop upvoting this, it sounds good, but it doesn't work. – Stefan Steiger Sep 06 '12 at 07:45
  • While I agree that this does not work in all situations, it does reduce some of the issues and does deserve to be upvoted. Unfortunately you sometimes cannot control what is contained within your iframe and therefore cannot control if it's standards compliant. I've personally had an issue where this solution resolved the problem, at least temporarily until the other app could be updated to be standards compliant. – nerdybeardo Jan 09 '13 at 13:26
  • @mikepr: No, unfortunately, it is not preferable. – Stefan Steiger Jan 23 '13 at 10:53
  • What if you are using IE9, the parent page you're viewing is quirks-mode, and the iframe has a doctype and specifies IE=Edge compatibility? – Scott Stafford May 03 '13 at 20:38
  • 2
    external link broken unfortunately – DannykPowell May 22 '15 at 10:51
15

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.

annakata
  • 74,572
  • 17
  • 113
  • 180
  • 7
    Wrong - as of IE9, doctype IS inherited... your confusion stems from the fact that in IE8, this is different... – Stefan Steiger Sep 06 '12 at 07:47
  • 1
    Agree with Quandary. I have the same issue with IE10. The parent doctype is propagating down to the IFrame regardless of what is specified in that page (that page renders different when it's opened on it's own). – b.pell Oct 18 '12 at 23:27
  • 2
    My "confusion" comes from the fact that the answer predates IE9 by many months. The helpful thing to do would have been to edit accordingly, but hey I guess downvotes are fun and easy, and reading is tech. – annakata Jun 03 '13 at 14:40
2

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

Community
  • 1
  • 1
Nick Blanchard-Wright
  • 721
  • 6
  • 6