IE Fun Fact: Height and Width of img Elements 0 Outside the Document

In IE6, the width and height attributes of img elements will be 0 if the element is not inside the document, even if the element has width and height attributes set from innerHTML.

Here’s some sample code:

var div = document.createElement("DIV");
div.innerHTML = '<img height="30" width="50" />';
var img = div.getElementsByTagName('IMG')[0];
assertEquals(0, img.getAttribute('height'));
assertEquals('<IMG height=30 width=50 />', img.outerHTML);

Note that the outerHTML is correct in this case, but the return value from getAttribute() is wrong.

Workaround:
Once you add the element to the document body, the width and height attributes correctly reflect the values they were set with:

document.body.appendChild(div);
assertEquals(30, img.getAttribute('height'));
assertEquals('<IMG height=30 width=50 />', img.outerHTML);

assertEquals brought to you by JsUnit. JsUnit: proving that the madness is real for generations.