Ordered list showing all zeros in IE9

Question

I have an

(ordered list) and in FF, Safari, Chrome it is rendered correctly. However in IE9 it is showing all zeros. It is not a spacing/padding is

Answer 1

The numbering issue occurs after revealing a hidden ol element and can be addressed by modifying or adding a class attribute to an element containing the ol element via JavaScript after the ol element has been revealed. The following code does that in a way that doesn't modify existing class attributes in any substantial way, doesn't leave an empty class attribute in the DOM, doesn't require jQuery, and only allows Trident 5.0 browsers (such as IE9) to execute the code:

if (/Trident\/5.0/.test(navigator.userAgent)) { // Windows Internet Explorer 9 Bug Fix
    // Official Bug Report: https://connect.microsoft.com/IE/feedback/details/657695/ordered-list-numbering-changes-from-correct-to-0-0
    // Bug Fix: http://stackoverflow.com/questions/5584500/ordered-list-showing-all-zeros-in-ie9
    if (listContainerElement.hasAttribute("class")) {
        listContainerElement.setAttribute("class", listContainerElement.getAttribute("class"));
    }
    else {
        listContainerElement.setAttribute("class", "");
        listContainerElement.removeAttribute("class");
    }
}

The issue can also be addressed by setting the display property via JavaScript:

listContainerElement.style.setProperty("display", someDisplayPropertyValue);

In my case, I was showing and hiding the list by removing and adding an HTML5 hidden attribute on an element containing the ol element (with [hidden] { display: none; } for IE9 compatibility) rather than directly manipulating the display property, so I ran into this issue.