IE9 Bug: Ordered Lists with Zeroes

So in my daily job, I came across a weird IE9 bug with ordered lists that were brought in via Ajax. They weren’t numbered, but had all zeroes instead. I searched around and found a couple solutions that mention adding a second div. I’d rather not pollute my markup so I wanted a different solution.

Since this is happening on an Ajax request, I can rely on JavaScript being available. What I discovered, is that if you hide the list and then show it again, the numbering appears without issue. Unfortunately, you can’t use a .css(“display”,”none”).css(“display”,”block”) because there needs to be some delay in execution.

So my solution using jQuery for the time-being is the following (you can determine whether you want to use $.browser.msie or $.support to try and track down IE):

var ieTimeout;
var selectorWrapperSet = $(selector);

selectorWrapperSet.css("display","none");
ieTimeout = setTimeout(function() {
selectorWrapperSet.css("display","block");
}, 1);

Yep, just a 1ms timer is enough of a delay in my testing so far to have the list numbers appear as normal.

Now, to consider this a tried and true solution would require testing this behavior against numerous scenarios which I haven’t done. However, I did want to post this in case it could help someone stop banging their head against a wall.

- Vern

Update: As Peter pointed out, there isn’t a need for the clearTimeout within the setTimeout.  My mind must have been thinking in terms of intervals when I wrote this post.  Thanks for the heads up Peter!