Otra solución:)

1. Mostrar el elemento:

        el.show();
   

2. Entonces:

    setTimeout(function(){
           $("ol").css("counter-reset", "item")
    }, 1);
   

La solución de div vacía no funcionó para mí. Aquí hay algunos jQuery simples que hicieron el truco.

// Workaround for IE list display bug
$('ol').hide().delay(1).show();

Esto parece ser un error en ciertos escenarios, específicamente aquellos que involucran AJAX. Este artículo se ejecuta a través de pasos para reproducir, pero no da ninguna resolución:

Http://blog.darkthread.net/post-2011-03-19-ie9-ol-bug.aspx

Tenga en cuenta que el artículo está en chino; lo traduje con Chrome.

Aquí hay un violín que funciona que muestra que es posible actualizar dinámicamente una lista sin cuestión:

Http://jsfiddle.net/6tr9p/18/

Desafortunadamente, esto no soluciona el problema cuando hay una necesidad de combinar Listas AJAX/IE9/Ordered, que es probablemente el caso si el OP está usando SharePoint.

Después de perder varias horas en este problema yo mismo, puedo confirmar que (fuera de SharePoint) esto es definitivamente un problema en IE 9.0.8112 en Windows 7. También parece afectar la metodología CSS counter-increment para implementar listas ordenadas también (es decir, no funciona; los elementos de la lista todavía están todos numerados con cero).

Actualizaré mi respuesta si encuentro una solución mejor que "deal with it"/"remove AJAX".

EDITAR: Aquí está mi "mejor respuesta".

Este código solo ha recibido pruebas preliminares, e implica conectarse a la API del lado del cliente AJAX. Puede romperse en otras versiones de IE, o en otros navegadores. Utilizar bajo su propio riesgo.

Dicho esto, corrige el comportamiento de las listas ordenadas que muestran todos los ceros en IE9 con números de inicio implícitos y explícitos definidos (a través del atributo start). Tenga en cuenta que el atributo start ya no está obsoleto en HTML 5.

function endRequest_OL_Fix(sender, args) {
    var ols = document.getElementsByTagName("ol");

    for (var i = 0; i < ols.length; i++) 
    {
        var explicitStart = ols[i].start;

        if (explicitStart > 0) {
            ols[i].start = -1;
            ols[i].start = explicitStart;
        }
        else {
            ols[i].start = 1;
        }
    }
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest_OL_Fix);

Una vez que se completa una solicitud (incluida una solicitud asincrónica) se examinan todas las etiquetas OL de la página. Si tienen un atributo start definido explícitamente, se conservará, restablecerá y reasignará. De lo contrario, start se asignará explícitamente.

Esto fuerza un nuevo dibujo y fixes con las advertencias antes mencionadas fixes soluciona el problema.

@Alex Kleshchevnikov - http://choosedaily.com/2481/ie9-bug-ordered-list-zeroes-ajax-request /

Estaba usando ese código; pero, todavía estaba recibiendo cero. Lo he modificado para agregar otro OL después del ofensivo y luego ocultarlo poco después.

"windows_instructions" es el OL para el que estoy fijando cero. "ie_fix" es el tonto OL que estoy escondiendo. Traté de usar 2 ms como el segundo tiempo de espera; pero, no fue suficiente tiempo. Ya que mi contenido ajax se está desvaneciendo en, no estoy recibiendo un FOUC con 100 ms.

Si es útil para correcciones futuras, parece que el problema es siempre con el último OL en la página.

Aquí está el código:

if($("#windows_instructions").length>0)
    {
        $("#windows_instructions").hide();
        ieTimeout = setTimeout(function() 
        {    
            $("#windows_instructions").show();
        }, 1);
        ieTimeout = setTimeout(function() 
        {    
            $("#ie_fix").hide();
        }, 100);
    }

Primero, es posible ver este error con nada más que CSS. Sucede cada vez que se oculta y se muestra un <ol>. Ejemplo jsfiddle que muestra bug.

También es posible corregir el error con nada más que CSS en algunas circunstancias. La solución es consistente, pero el código es delicado y no el más bonito. Muchas cosas que no deberían hacer ninguna diferencia en CSS hacen aquí, así que codifícalo cuidadosamente. Ejemplo jsfiddle que funciona.. La idea básica es: alternar la línea en lugar de la lista, luego recrear la numeración de la lista con counter-reset en el (visible pero a veces vacío) <ol> y counter-increment en el <li>.

Ventaja: todo aquí se puede guardar dentro de una hoja de estilo solo para IE. Si :hover no tiene sentido en su caso y usa algo como jQuery .show(), considere algo basado en .addClass() en su lugar.

Hablando de agregar clases, como si este error no fuera lo suficientemente extraño ya, parece que <ol> s trabaje en IE en condiciones como el primer ejemplo si Javascript agrega una clase al elemento wrapper, incluso si la clase no hace nada. Aquí hay un ejemplo de jsfiddle. No puedo garantizar que funcione en cualquier otro lugar, pero funciona aquí.

Si usted está tratando de entender el error, a) buena suerte, y b) echa un vistazo a este jsfiddle aquí. Es lo que sucede si haces la opción CSS counter (más numeración regular), pero alterna <ol>no es el <li> s. Se obtiene la situación loca donde, lo que se muestra es completamente diferente dependiendo de si se pasa el ratón sobre el hermano anterior, el siguiente hermano, o ninguno. No tiene sentido... pero es probablemente una pista de lo que en la tierra este insecto realmente significa.

También tengo una situación que no puedo replicar donde la numeración es todos los 1s, todos los 2s, todos los 3s, etc. dependiendo de qué <ol> es: el primero en la página se convierte en 1,1,1,1,1, el segundo se convierte en 2,2,2,2,2, entonces 3,3,3,3,3, etc. No se puede aislar lo que causa esa peculiaridad.

Me encontré con este problema yo mismo recientemente y se me ocurrió una solución diferente a incluir un div vacío. Definitivamente podría usar más pruebas en diferentes escenarios, pero esto funcionó para mí, incluso cuando la lista estaba oculta y se mostraba de nuevo.

var ieTimeout;
var selectorWrapperSet = $(selector);

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

De tu captura de pantalla, parece que estás usando SharePoint. Supongo que hay alguna interferencia CSS resultante de la configuración CSS existente en SharePoint.

Como prueba, intente declarar su estilo ol en línea y vea si ayuda.

<ol style="list-style-type:decimal;"> 
    <li>Enter basic company information</li> 
    <li>Select from our portfolio of products</li> 
    <li>Attach your employee census</li> 
    <li>Review your selections and submit your request.</li> 
</ol>

Probablemente necesite el siguiente fragmento de marcado en su hoja de estilos -

ol {list-style:decimal}

Lo que hace esto es declarar el tipo de lista ordenada que preferirías si aún no lo has declarado en tu hoja de estilos.

El problema de numeración ocurre después de revelar un elemento ol oculto y se puede abordar modificando o agregando un atributo de clase a un elemento que contiene el elemento ol a través de JavaScript después de que el elemento ol haya sido revelado. El siguiente código hace eso de una manera que no modifica los atributos de clase existentes de ninguna manera sustancial, no deja un atributo de clase vacío en el DOM, no requiere jQuery y solo permite que los navegadores Trident 5.0 (como IE9) ejecuten código:

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");
    }
}

El problema también se puede resolver estableciendo la propiedad display a través de JavaScript:

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

En mi caso, estaba mostrando y ocultando la lista eliminando y agregando un atributo HTML5 hidden en un elemento que contiene el elemento ol (con [hidden] { display: none; } para compatibilidad con IE9) en lugar de manipular directamente la propiedad display, así que me encontré con este problema.

Tuvo un problema similar con Edge en Windows 10. Mostraba 0s junto a los elementos de la lista dentro de un menú móvil que se abría usando una transición css. Sentí que probé cien variantes de list-style: none; y list-style-type: none; en el ol, sus padres y descendientes.

Terminó con esto para arreglarlo en Edge / IE pero no meterse con el estilo que funcionó para cualquier otro navegador de escritorio y móvil:

/*
  Hack for Edge browser. Some things never change...
  This is definitely dirty, hacky and overkill.
  Without this, Edge on windows 10 shows a 0. next to every list item in a mobile menu that is animated with a css transition on our site.
  Using technique for targeting Edge from https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css
  Answer by KittMedia: https://stackoverflow.com/a/32202953/
*/
@supports (-ms-ime-align: auto) {
  .element-im-targeting ol,
  .element-im-targeting ol li,
  .element-im-targeting ol * {
    list-style: none;
    list-style-type: none;
  }
}