33 votes

Une liste ordonnée affiche tous les zéros dans IE9

J'ai un <ol> (liste ordonnée) et dans FF, Safari, Chrome il est rendu correctement. Cependant, dans IE9, il affiche tous les zéros. Il ne s'agit pas d'un problème d'espacement ou de remplissage, car je suis en mesure de voir les zéros.

Mon HTML est le suivant :

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

Quelqu'un a-t-il rencontré ce problème et, espérons-le, une solution ?

ol issues

27voto

Ian Boyd Points 50743

Mise à jour 20/03/2012 - Corrigé dans IE10

Cette régression a été corrigée dans Internet Explorer 10 (tous les modes de document). Microsoft a supprimé le Connectez-vous à Vous ne pouvez donc pas vérifier son statut. Puisque Microsoft pousse maintenant IE10 vers le bas automatiquement, il devrait fonctionner pour tous vos clients réguliers.


Il s'agit d'une régression connue d'IE9, qui a été signalée sur Microsoft Connect :

La numérotation de la liste ordonnée passe de correcte à 0, 0

Type : Bug
ID : 657695
Ouvert : 4/6/2011 12:10:52 PM
Restriction d'accès : Public

0 Solution(s) de rechange
5 Le ou les utilisateurs peuvent reproduire ce bogue


Mise à jour :

Posté par Microsoft le 6/14/2011 à 3:20 PM
Merci pour vos commentaires.

Nous avons pu reproduire le problème et nous l'examinons actuellement.

Meilleures salutations,

L'équipe Internet Explorer


Page HTML qui reproduit le 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>

Une solution de contournement est de placer un élément vide après votre 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>

Les navigateurs qui présentent le bug

Internet Explorer 9 (9.0.8112.16421)

  • Les bizarreries du mode document : Travaux
  • Mode document Normes IE7 : Fonctionne
  • Mode document Normes IE8 : Échecs
  • Mode document Normes IE9 : Échecs

Internet Explorer 8 (8.0.6001.19048)

  • Les bizarreries du mode document : Travaux
  • Mode document Normes IE7 : Fonctionne
  • Mode document Normes IE8 : Fonctionne

Internet Explorer 7 (7.0.6000.16982) : Travaux

Google Chrome 10 (10.0.648.134) : Travaux

7voto

no81no Points 101

Une autre solution :)

  1. Montrer l'élément :

         el.show();
  2. Ensuite :

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

3voto

Takaitra Points 106

Le contournement de la division vide n'a pas fonctionné pour moi. Voici un simple jQuery qui a fait l'affaire.

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

2voto

Tim Medora Points 30969

Il semble qu'il s'agisse d'un bogue dans certains scénarios, notamment ceux qui impliquent AJAX. Cet article présente les étapes à suivre pour le reproduire, mais ne donne aucune solution :

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

Notez que l'article est en chinois ; je l'ai traduit avec Chrome.

Voici un travail qui montre qu'il est possible de mettre à jour dynamiquement une liste sans problème :

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

Malheureusement, cela ne résout pas le problème lorsqu'il est nécessaire de combiner AJAX/IE9/Listes ordonnées, ce qui est probablement le cas si le PO utilise SharePoint.

Après avoir passé plusieurs heures à résoudre ce problème moi-même, je peux confirmer (en dehors de SharePoint) qu'il s'agit bien d'un problème avec IE 9.0.8112 sur Windows 7. Il semble également avoir un impact sur les CSS counter-increment pour la mise en œuvre des listes ordonnées également (c'est-à-dire que cela ne fonctionne pas ; les éléments de la liste sont toujours tous numérotés par zéro).

Je mettrai à jour ma réponse si je trouve une meilleure solution que "faire avec" / "supprimer AJAX".

EDIT : Voici ma "meilleure réponse".

Ce code n'a fait l'objet que de tests préliminaires et implique de se connecter à l'API AJAX côté client. Il peut se briser dans d'autres versions d'IE, ou dans d'autres navigateurs. Utilisez-le à vos risques et périls.

Cela dit, il corrige le comportement des listes ordonnées qui affichent tous les zéros dans IE9 avec des numéros de départ implicites et explicites définis (via l'attribut start). Notez que l'attribut start n'est plus déprécié 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);

Une fois la requête terminée (y compris une requête asynchrone), toutes les balises OL de la page sont examinées. Si elles ont une balise explicitement définie start il sera conservé, réinitialisé et réaffecté. Dans le cas contraire, start seront explicitement attribuées.

Cela oblige à redessiner et, avec les réserves susmentionnées, résout le problème.

1voto

vernonk Points 528

J'ai rencontré ce problème récemment et j'ai trouvé une autre solution que d'inclure un div vide. Je pourrais certainement faire plus de tests dans différents scénarios, mais cette solution a fonctionné pour moi, même lorsque la liste a été masquée et réaffichée.

var ieTimeout;
var selectorWrapperSet = $(selector);

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X