Remove frameBorder on Internet Explorer in quirks mode

I know that the most of the internet pages run in standard mode, but sometimes it happens to work for some generic plugin and so you have to check your code in such a situation and especially with Internet Explorer 6, 7 and 8 there are a lot of bad surprises 🙁

A page runs in standard mode when a doctype is set. It’s common to use the simple HTML5 doctype on the first row of a HTML page: <DOCTYPE html> Very easy! Without such a definition your page runs in non-standard mode, also called Internet Explorer 6 mode, but everyone knows it as “quirks mode”.

What I want to talk about is a Internet Explorer “feature” in quirks mode: the iframe border. Microsoft introduced an attribute for this element called “frameBorder”. Basically it’s a inset border around an iframe that you can switch on (default) or off. Unfortunately it’s not possible to switch through Javascript. You actually change the property’s value, but nothing happens! That’s a big problem!!

But there is a workaround that looks like this:

var iframe = document.getElementById('myiframe');
iframe.frameBorder = '0';
iframe.outerHTML = iframe.outerHTML;

That’s awful, I know, but it works! The iframe is forced to be rendered again and this way IE updates the frame border. Yay! 😀

But pay attention. The iframe must be already inserted into the DOM. If you created an iframe using document.createElement you have first add it somewhere in your page and then apply the workaround, otherwise nothing can happen.

And the last one: I noticed that if you have a handler to your iframe and apply the outerHTML workaround the handler invalidates somehow, so it’s safer to get a new one using, for example, getElementById.

Leave a Reply

Your email address will not be published. Required fields are marked *