w3schools section new index example html internet-explorer-9 html-lists

section - index html example html5



Lista ordenada que muestra todos los ceros en IE9 (11)

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?

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 la entrada de Connect , 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
ID : 657695
Abierto : 4/6/2011 12:10:52 PM
Restricción de acceso : público

0 Solución (es)
5 usuario (s) pueden reproducir este error

Actualizar:

Publicado por Microsoft el 14/6/2011 a las 3:20 PM
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 alternativa 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 Estándares IE8: falla
  • Modo de documento Estándares IE9: 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): funciona

Google Chrome 10 (10.0.648.134): funciona

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

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>

El problema de numeración se produce después de revelar un elemento ol oculto y puede abordarse modificando o agregando un atributo de clase a un elemento que contiene el elemento ol mediante JavaScript después de que se haya revelado el elemento ol. El siguiente código lo hace de una manera que no modifica los atributos de clase existentes de manera sustancial, no deja un atributo de clase vacío en el DOM, no requiere jQuery y solo permite navegadores Trident 5.0 (como IE9) para ejecutar el 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://.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 solucionar estableciendo la propiedad de display través de JavaScript:

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

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

En primer lugar, es posible ver este error con nada más que CSS. Sucede cada vez que un <ol> está oculto y se muestra. Ejemplo jsfiddle que muestra el error.

También es posible arreglar el error con CSS en algunas circunstancias. La solución es consistente, pero el código es delicado y no el mejor. Hay muchas cosas que no deberían hacer ninguna diferencia en CSS aquí, así que codifíquelas 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 el counter-reset en el ( <ol> visible> pero a veces vacío) y counter-increment en el counter-increment en 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() , considere algo basado en .addClass() lugar.

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

Si intentas comprender el error, a) buena suerte, yb) echa un vistazo a este jsfiddle aquí . Es lo que sucede si haces la opción del counter CSS (más la numeración regular), pero alternar los <ol> s no los <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> sea: la primera 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 lo que causa ese capricho.

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 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 definitivamente es un problema en IE 9.0.8112 en Windows 7. También parece afectar la metodología de counter-increment CSS 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 un atributo de start definido explícitamente, se conservará, restablecerá y reasignará. De lo contrario, el start se asignará explícitamente.

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

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();

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

Otra solución :)

  1. Mostrar el elemento:

    el.show();

  2. Entonces:

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

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.

Tuve un problema similar con Edge en Windows 10. Se mostraban los 0 junto a los elementos de la lista en un menú para el dispositivo móvil que se abrió con una transición css. Me sentí como si probara cientos de variantes de estilo de lista: ninguna; y list-style-type: none; en el ol, sus padres y descendientes.

Terminó con esto para arreglarlo en Edge / IE, pero no se metió con el estilo que funcionaba para cualquier otro escritorio y navegador 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://.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css Answer by KittMedia: https://.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; } }