IE Is Being Mean to Me: Episode 2 – Uppercase HTML Tag

It’s my mistake again. It’s morning and I realized my little code as shown below did not work properly on IE 7 and IE8.

var i = $('#someStuff').html().indexOf("<a>");

It turns out that in IE 7 and IE 8, the HTML tags returned by .html() are all in uppercase. Thus the result is not as expected. Luckily, this is not the case anymore in the latest version, IE 10. So, in order to solve the problem, the code has to be modified to be as follows by converting the result to have lowercase.

var i = $('#someStuff').html().toLowerCase().indexOf("<a>");

Actually this is an known issue in older version of IE. It’s just that I forgot about it.

Meanwhile, I also found some interesting articles about this.

In the past, there were people having a debate on whether the weird behavior of innerHTML or html() in IE 7/8 is a feature or bug. For example, there is a discussion on this in 2008: Bug of Feature – Live .innerHTML in IE.

Currently, XHTML1.0 is still an implemented standard in most of the Internet browsers. In XHTML 1.0: The Extensible HyperText Markup Language (Second Edition), it points out that XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.

For CSS, even though its syntax is not case-sensitive, since element names are not under the control of CSS, the element names used in CSS are also case-sensitive in XHTML (but not HTML).

Anyway, I would like to thank Microsoft engineers for making IE 10 to do the right things. Here is a promo video of IE 10.

IE Is Being Mean to Me: Episode 1 – Trailing Comma

This post is about a mistake that I made in my JavaScript code.

I always thought trailing commas were standard in all browsers. I tested my code on IE 10, Firefox and Chrome and it just worked fine. However, my code is just not working at all when tested it on IE 7 and IE 8. It turns out that IE 7 & 8 have not implemented ECMAScript 5 correctly because, in fact, if an element is elided at the end of an array, that element does not contribute to the length of the Array.

So if I run the following code in different browsers, I will get different results.

var test = [,,,,];
alert("Length of the array: " + test.length);

In IE 10, Firefox and Chrome, the length of the array will be 4. However, in IE 7 and 8, the length of the array is 5, which in this case does not chop off the “undefined” item at the end of the array.

Here is a list of online discussions that I found when I was trying to fix the bug.

  1. Trailing commas in JavaScript
  2. The Curious Case of Trailing Commas in IE
  3. My IE9 is fine with trailing comma, user’s IE9 is not; why?
  4. Jquery autoselect not working on IE8

Yup, so this post is just to remind me to be careful and not to repeat the same mistake again.

Finally, a song “IE Is Being Mean to Me” by Scott Ward that I found on YouTube.