Rendering difference between Firefox and IE when using innerHTML

Andrew Nurse — Sat, 16 Aug 2008 00:54:35 GMT

I know, its been a while since I've blogged, but I'm just so busy with my Microsoft internship its been hard to find time. Anyway, on to the post...

I've been doing quite a bit of JavaScript work recently and I discovered an interesting inconsistency between Firefox and IE when it comes to the innerHTML project. Federico, from the ASP.Net QA team blog, posted the details on that blog, but here's a quick summary.

Basically, it comes down to when the browsers perform whitespace normalization. In HTML, multiple whitespace (space, tab, newline etc.) characters are treated as a single space. Also, whitespace at the beginning of "block" elements (which are elements like DIV which have newlines before them) is removed. In Firefox, the whitespace is preserved exactly as typed when stored in Firefox's internal structures. When the HTML is rendered out, Firefox performs the normalization on the fly. However, in IE, the whitespace is normalized before the internal structures are built.

The result of this is that the contents of the innerHTML property for a DOM element can vary between these two browsers.

Check out the blog post for more details.

VibrantCode - JavaScript

Rendering difference between Firefox and IE when using innerHTML