Element inserted into DOM doesn't display in IE7

I’m using jQuery to insert an element into the page when a link is clicked. But the element does not appear (visually), unless you modify it after it has been added to the DOM.

Has anyone come across / heard about this behaviour before?

It’s no doubt one of many quirks in that old browser. Does it behave the same way without JS—that is, if you build it statically from the start? If so, post the code, and our resident dead browser guru @Paul_O_B will sort it out for you.

Or, you could just forget about this, and hope that the two people in rural China who still use IE7 either don’t visit your site or will be prompted to upgrade their browser if they do.

The usual fix for this is to dynamically add a classname to an element which causes a reflow in IE and then missing elements usually appear in the correct place.


element.className = element.className;

It’s not fullproof but generally works.

Thanks for the replies, good to know it is an IE bug. Saves me from spending the time trying to debug it to find what the cause is. I didn’t try the className fix, but just set the style display property to block after inserting the element and that worked fine.