Grow your CSS skills. Land your dream job.

In IE, iFrames on Pages in Quirks Mode Also in Quirks Mode

Published by Chris Coyier

Just wanted to make sure that this was documented. Here's what I think the most important lesson is:

If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page on another via iframe, you should use the HTML5 shim on it for all version of IE.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Here's the scoop. Let's say you are using HTML5 to be building your pages as you should be. You use the HTML5 shim on it as you should be, and your conditional comment is for IE 8 and down, which makes sense, because IE 9+ supports HTML5. Then someone embeds that page via an iframe onto another page which is in quirks mode (like if they forget or screw up the <!DOCYTPE html>). Your page will render on that page in quirks mode, and all your CSS that applies to HTML5 elements won't work, and your page will look like crap.

The shim won't fix the quirks mode, but at least it will make sure all your CSS works.

Here is a test page. Load in IE 9 or 10 to see the issue.

But Chris‽

Why would you have a page in quirks mode? Well me and you wouldn't. But you can't control every page on the internet.

At Wufoo, we allow forms to be embedded on third party sites in iframes as well as use HTML5. We recently just had to make the change to load the shim on all versions of IE because of this very issue.

This is relevant to literally any page that could be embedded via iframe. Off the top of my head: a calendar like how you can embed Google Calendars. Campfire chats. Embeddable widgets in general. Flickr slideshows. Other forms like Dispatch or polls like Polldaddy. Twitter and Facebook buttons come over in iframes. Tip of the iceberg.

For the IE team

Can this please be fixed? It's like this in IE 10 platform preview too. It's unsettling to know that people can iframe your content and have it look totally bungled through no fault of your own.

Comments

  1. Wow. That’s a really disappointing prospect, to wait for “people” to all have at least IE11 working. Even the old granny with the dial up connection. See you in 2040, Chris? :-P

  2. I think the developers for Internet Explorer are sitting back and laughing, because that browser has got to be a joke! There is no other possible explanation.

  3. Can we just drop IE, that sounds like an awesome idea.

    Drop IE and all the internet’s growing pains will be solved (except for minor ones, but the big ones will be fixed).

    Or at the very least support CSS like EVERY OTHER FREAKING BROWSER. Quit making me do special stuff just for you, and quit half-ass supporting stuff. IE brings the worst out in me…

    • Nate

      What I do is tell people that they should use anything except IE … and any new computers they get … after they download FF or any other browser … they should immediately delete IE … and as long as you show proof of what is being spoken … most are glad for the advice … and actually do switch … of course I am just one person … but … I would imagine if a community of developers would make the same recommendation … the change developers all seek from IE would come a whole lot faster if same recommendation would be made …

    • Drop IE? – What is IE? :-)

  4. Yet another reason to kill off IE. Remember kiddies, friends don’t let friends use IE.

  5. Kill it. Kill it with a stick until it’s dead.

  6. Just use modernizr instead of the shiv. It does the same thing and adds the benfit of being able to style for capability. Google doesn’t host it on their cdn, but it is on cdnjs.com

    • In the use case Chris presented the shim is actually a better choice, because it’s precisely made to support non-existent elements. Modernizr would be going overboard if you’re not using a decent share of it’s features.

  7. I have to point out: That’s the best use of the interrobang I’ve seen in a while.

    • Thank you for the link, Marco (and @ChrisCoyier and the powers that be for allowing active URL’s in comments). I was unaware of the Interrobang until now. Learned not one but TWO valuable things by reading this.

      General comment:
      Regarding IE and Windows, like it or not, most countries other than G20 (maybe even G8 too?) have much higher percentages of Internet Explorer users than U.S. and Western Europe. Whenever I look at Chinese websites, as in People’s Republic of China, not necessarily Taiwan or Singapore, everything is in the context of IE only, including personal website developer tips. That’s why this is really useful to know, although sad.

  8. Francesco

    I was wondering what Modernizr does… it includes the shim, and of course we include it without conditional comments, for Modernizr isn’t for IE only. But does it “filter” the shim internally only to IE<9 or not?

    • The docs say “this script is identical to what is used in the popular html5shim/html5shiv library”, but it looks like it actually does only run on IE<9, so it wouldn't fix this iFrame issue. Sad.

    • Something to file at the developers of Modernizr.

  9. But IE will not be killed anytime soon, we all know that… so we have to deal with this sort of issues the best we can. In that view, thank you Chris for your constant good work on breaking the (bad) news first. In this field, that’s very !important (lame joke, but it’s early in the morning)

    I have found this to be a problem too and I have no way of getting around it here at work. The team insists on using Microsoft Telerik Controls which dinamically render HTML pages (ie, Iframes) themselves, and I have no control over the initial markup and doctypes. I had removed support for HTML5, but I’ll give this a try, it makes perfect sense.

    What really is funny is that just two weeks ago I attended an HTML5 conference given by Microsoft themselves. But they don’t make it easy for no one!

  10. Rikudo Sennin

    What a surprise, ANOTHER IE featurebug…
    I’m gonna BURN HIS HOUSE DOWN! WITH THE LEMONS!

  11. IE isn’t something we should be worried about boycotting. That’s out of our control. However, if you’re going to boycott something, boycott Quirks mode. If someone frames your site and their page is using quirks mode, the problem is in their code and the onus to fix is in their court.

    • I should have read the entire article. Didn’t realize your use case was an embedded widget. Disregard above.

      In my world, it’d be much more likely to run into the reverse of this situation, where I’m controlling the outer frame (in standards mode) trying to frame a site that was developed to quirks mode.

  12. Windows or Mac should receive for all users one servicepack, where will be browser with HTML5 compatibility.

    • I don’t think users of other OSs per se share the love for HTML5 ready browsers, although Distros like Ubuntu make it really hard not to stay up-to-date. My dad complains about it every 4th and 10th month of the year. (Hmm. I see a pattern)

    • Time to implement a Like-button, Chris ><

  13. Just hoping that EI team will see this matter..

  14. Oh, the test page was really helpful.. thanks for sharing this tips.

  15. Nice post.Thanks

  16. I would like add style with float over text this:

    How to do?

  17. i think, developers should just do the new innovation…

    things such as compatibility, is browser’s problem, and let them improve their feature with our innovation.

    For the ones adaptive with innovation, rise out. For the one didn’t adaptive with HTML5 innovation, IE, let them dead.

  18. Chris, I would like to draw your attention to a typo mistake.

    “If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page on another via iframe, you should use the HTML5 shim on it for all version of IE.”

    HTML5 Shiv, and not HTML5 shim.

    • Shiv and shim are kind of used interchanably in this weird web-slang way. Shim is kinda of “correct” in that a shim is like a thing you shove under a table leg to balance it or something, a quick fix. Shiv is something you stab somebody in the neck with in prison. But when (I think Resig?) posted the first blog post about this idea, it was misnamed shiv and the funny typo stuck.

  19. Thought ” must be ”… :)

  20. Sorry – <!DOCYTPE html> must be <!DOCTYPE html>

  21. Lore
    Permalink to comment#

    I seem to have an issue with some LMSs. The LMS vendor has attempted a fix by placing the standard doctype around the frameset, but the individual frames still have different doctypes.

    Is this also a known issue? It appears to still be running in quirksmode, even though the master frame, and my frame are both in standards mode. Since it took the LMS vendor 2 weeks to apply the last fix, I’m rather desperate for any fix I might be able to apply to prevent quirksmode on a child frame.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".