Ordered list showing all zeros in IE9

by

Update 3/20/2012 – Fixed in IE10

This regression has been fixed in Internet Explorer 10 (all document modes). Microsoft has deleted the Connect entry, so you cannot review its status. Since Microsoft now pushes IE10 down automatically, it should be working for all your regular customers.

This is a known IE9 regression, which has been reported on Microsoft Connect:

Ordered list numbering changes from correct to 0, 0

Type: Bug
ID: 657695
Opened: 4/6/2011 12:10:52 PM
Access Restriction: Public

0 Workaround(s)
5 User(s) can reproduce this bug

Update:

Posted by Microsoft on 6/14/2011 at 3:20 PM
Thank you for your feedback.

We were able to reproduce the issue and are investigating it.

Best regards,

The Internet Explorer Team

HTML page that reproduces bug:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>IE9 Ordered List Zero Bug</TITLE>
<SCRIPT type="text/javascript">
    setTimeout(function ()
        {
            document.getElementById("dv1").innerHTML = "<ol><li>XXX</li><li>YYY</li></ol>";
            var container = document.createElement('span');
            container.style.cssText = "display:none";
            document.getElementById("dv2").appendChild(container);
        }, 1000);
</SCRIPT>
</HEAD>
<BODY>

<DIV id="dv1">
    <OL>
    <LI>AAA</LI>
    <LI>BBB</LI>
    </OL>
</DIV>

<DIV id="dv2"></DIV>

</BODY>
</HTML>

A workaround is to place an empty element after your DIV:

<div id="one">
   <ol>
      <li>one</li>
      <li>two</li>
   </ol>
</div>
<div id="two" style="display:none">
   <ol>
      <li>three</li>
      <li>four</li>
   </ol>
</div>
<div id="empty"></div>

Browsers that exhibit the bug

Internet Explorer 9 (9.0.8112.16421)

  • Document Mode Quirks: Works
  • Document Mode IE7 standards: Works
  • Document Mode IE8 standards: Fails
  • Document Mode IE9 standards: Fails

Internet Explorer 8 (8.0.6001.19048)

  • Document Mode Quirks: Works
  • Document Mode IE7 standards: Works
  • Document Mode IE8 standards: Works

Internet Explorer 7 (7.0.6000.16982): Works

Google Chrome 10 (10.0.648.134): Works

More Related Contents:

  1. How do I create a text box in HTML? [closed]
  2. How to keep indent for second line in ordered lists via CSS?
  3. Proper way to make HTML nested list?
  4. Li item on two lines. Second line has no margin
  5. How to display an unordered list in two columns?
  6. How can you customize the numbers in an ordered list?
  7. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  8. Why does IE9 switch to compatibility mode on my website?
  9. Responsive Separator for Horizontal List
  10. Why should I use ‘li’ instead of ‘div’?
  11. Removing ul indentation with CSS
  12. HTML5 doctype putting IE9 into quirks mode?
  13. HTML + CSS: Ordered List without the Period?
  14. Does the tag in HTML have an ending tag?
  15. Is using without enclosing tags dangerous? [closed]
  16. How do I justify a horizontal list?
  17. Should the HTML Anchor Tag Honor the Disabled Attribute?
  18. Change the color of a bullet in a html list?
  19. Internet Explorer 9 Drag and Drop (DnD)
  20. HTML + CSS: Numbered list with numbers inside of circles
  21. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  22. How to center an unordered list?
  23. HTML5 – mp4 video does not play in IE9
  24. HTML list-style-type dash
  25. Target IE9 Only via CSS [duplicate]
  26. Is div inside list allowed? [duplicate]
  27. Should I use s and s inside my s?
  28. How can I prefix ordered list item numbers with a static string using CSS?
  29. Can you style ordered list numbers?
  30. Adding text before list

Leave a Comment