Solution for web pages with white spaces failing in Internet Explorer 9 (IE9)

If you have a webpage with white spaces/new line character between the ending of one html tag and beginning of another, then chances are there that it may not display or work properly in Internet Explorer 9. I checked the  html code generated for Internet Explorer 8(where it works!) and Internet Explorer 9. There is no difference. Then what has gone wrong?

Issue : 

• Internet Explorer 9 is conforming to HTML 5 specifications. Accordingly HTML parsing has been changed in IE 9. One change that affects almost every page is how whitespace parsed. While IE8 removes or collapses whitespace, IE9 persists all whitespace into the DOM at parse-time. Refer to the following link for more details : http://blogs.msdn.com/b/ie/archive/2010/09/13/interoperable-html-parsing-in-ie9.aspx 

• So, if you have java script code which accesses the nodes in DOM ignoring the white spaces previously, then you are bound to be in big  trouble. In IE9, all the white spaces/new lines in DOM are treated as nodes. So, when you traverse using APIs like firstChild may not reference to the element you might have intended.

Solutions :

1. If you want to traverse elements (ignoring the white spaces) only then use Element Traversal APIs - calling functions such as nextElementSibling to ensure that you don’t reference a stray newline character or white space by mistake.
2. On the other hand, make sure that your code is backward compatible with previous browser versions by adding check for the same while traversing the elements in DOM
3. Removing the white spaces - this is a tedious job, as you would be doing the work of the browser done previously. But here you don't need to have the check for Internet Explorer browser versions.