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

Avatar of Chris Coyier
Chris Coyier on

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.