Pregunta Lista ordenada que muestra todos los ceros en IE9


Yo tengo un <ol> (lista ordenada) y en FF, Safari, Chrome se representa correctamente. Sin embargo, en IE9 muestra todos los ceros. No es un problema de espaciado / relleno porque puedo ver los ceros.

Mi HTML es el siguiente:

<ol> 
    <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>

¿Alguien se encuentra con ese problema y con suerte una solución?

ol issues


32
2018-04-07 16:37


origen


Respuestas:


Actualización 20/03/2012 - Solucionado en IE10

Esta regresión se ha corregido en Internet Explorer 10 (todos los modos de documento). Microsoft ha eliminado el Conectar entrada, por lo que no puede revisar su estado. Como Microsoft ahora baja IE10 automáticamente, debería funcionar para todos sus clientes habituales.


Esta es una regresión conocida de IE9, que se informó en Microsoft Connect:

Numeración de la lista ordenada cambia de correcta a 0, 0

Tipo: Error
CARNÉ DE IDENTIDAD: 657695
Abrió: 4/6/2011 12:10:52 PM
Restricción de acceso: Público

0 Solución (es)
5 Usuario (s) puede reproducir este error


Actualizar:

publicado por Microsoft el 14/06/2011 a las 3:20 p.m.
  Gracias por tus comentarios.

Pudimos reproducir el problema y lo estamos investigando.

Atentamente,

El equipo de Internet Explorer


Página HTML que reproduce el error:

<!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>

Una solución es colocar un elemento vacío después de su 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>

Navegadores que exhiben el error

Internet Explorer 9 (9.0.8112.16421) 

  • Aspectos extraños del modo Document: funciona
  • Document Mode IE7 standards: Funciona
  • Modo de documento IE8 estándares: Falla
  • Modo de documento IE9 estándares: Falla

Internet Explorer 8 (8.0.6001.19048) 

  • Aspectos extraños del modo Document: funciona
  • Document Mode IE7 standards: Funciona
  • Document Mode IE8 standards: Funciona

Internet Explorer 7 (7.0.6000.16982): Trabajos

Google Chrome 10 (10.0.648.134): Trabajos


27
2018-05-05 14:18



Otra solución :)

  1. Mostrar el elemento:

         el.show ();
    
  2. Entonces:

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

7
2018-03-13 10:10



La solución 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();

3
2017-11-02 03:59



Esto parece ser un error en ciertos escenarios, específicamente aquellos que involucran a AJAX. Este artículo ejecuta los pasos para reproducirse 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 trabajando violín que muestra que es posible actualizar dinámicamente una lista sin problemas:

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

Lamentablemente, esto no soluciona el problema cuando hay una necesidad de combinar AJAX / IE9 / Listas ordenadas, que probablemente sea el caso si el OP usa SharePoint.

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

Actualizaré mi respuesta si encuentro una solución mejor que "lidiar con ella" / "eliminar AJAX".

EDITAR: Esta es mi "mejor respuesta".

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

Dicho esto, corrige el comportamiento de las listas ordenadas que muestran todos los ceros en IE9 con los números de inicio implícitos y explícitos definidos (a través del atributo de inicio). Tenga en cuenta que el atributo de inicio ya no está en desuso 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 asíncrona), se examinan todas las etiquetas OL en la página. Si tienen una definición explícita start atributo, se conservará, restablecerá y reasignará. De otra manera, start será asignado explícitamente

Esto obliga a volver a dibujar y, con las advertencias antes mencionadas, soluciona el problema.


2
2018-05-22 00:35



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

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

"windows_instructions" es el OL por el que estoy arreglando cero. "ie_fix" es el maniquí OL que estoy escondiendo. Intenté usar 2 ms como el segundo tiempo de espera; pero, no fue suficiente tiempo. Como mi contenido de ajax se está desvaneciendo, no recibiré un FOUC con 100 ms.

Si es útil para soluciones futuras, parece que el problema siempre es 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);
    }

1
2018-03-21 17:51



En primer lugar, es posible ver este error con nada más que CSS. Sucede en cualquier momento <ol> está escondido y mostrado. Ejemplo jsfiddle que muestra el error.

Es también posible arreglar 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 mejor. Muchas cosas que no debería Haga cualquier diferencia en CSS aquí, así que codifíquelo con cuidado. Ejemplo jsfiddle que funciona.. La idea básica es: alternar la línea en lugar de la lista, y luego volver a crear la numeración de la lista con counter-reset en el (visible pero a veces vacío) <ol> y counter-increment sobre el <li>.

Ventaja: todo aquí puede esconderse dentro de una hoja de estilo solo de IE. Si el :hover no tiene sentido en su caso y utiliza algo como jQuery .show(), considera algo basado en .addClass() en lugar.

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


Si estás tratando de entender el error, a) buena suerte, yb) echa un vistazo a este jsfiddle aquí. Es lo que sucede si haces el CSS counter opción (más numeración regular), pero alternar entre <ol>s no es el <li>s. Usted obtiene la loca situación en la que, lo que se muestra es completamente diferente dependiendo de si pasa el mouse sobre el hermano anterior, el próximo hermano o ninguno de los dos. No tiene sentido ... pero es probable que sea una pista de lo que realmente significa este error.


También tengo una situación que no puedo replicar donde la numeración es 1, 2, 3, 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, luego 3,3,3,3,3, etc. No se puede aislar causa esa peculiaridad


1
2018-01-02 03:51



Me encontré con este problema recientemente y se me ocurrió una solución diferente a la de 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 volvió a mostrar.

var ieTimeout;
var selectorWrapperSet = $(selector);

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

1
2017-09-10 02:25



Desde su captura de pantalla, parece que está usando SharePoint. Supongo que hay alguna interferencia de CSS como resultado de la configuración existente de CSS 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>

0
2018-04-07 18:05



Probablemente necesites el siguiente fragmento de marca en tu hoja de estilo:

ol {list-style:decimal}

Lo que hace es declarar el tipo de lista ordenada que preferiría si aún no la ha declarado en su hoja de estilo.


0
2018-05-22 01:31