web-dev-qa-db-fra.com

Internet Explorer 11 ignore le style de liste: aucun lors du premier chargement

J'utilise le plugin Superfish jQuery pour mon menu. Dans Chrome et dans l'émulateur mobile Opera, cela fonctionne bien, mais dans Internet Explorer 11, la propriété CSS list-style:none s'applique uniquement au niveau supérieur du menu et non aux sous-menus basculés, bien que, dans la vue des outils de développement, elle s'applique apparemment aux éléments appropriés. Il en résulte: Bugged menu Le utilisé ce CSS:

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
}
.sf-menu > li {
    float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul ul {
    top: 0;
    left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
    float: left;
    margin-bottom: 1em;
}
.sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    min-width: 12em; /* allow long menu items to determine submenu width */
    *width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
    border-left: 1px solid #fff;
    border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(255,255,255,.5);
    padding: .75em 1em;
    text-decoration: none;
    zoom: 1; /* IE7 */
}
.sf-menu a {
    color: #13a;
}
.sf-menu li {
    background: #BDD2FF;
    white-space: nowrap; /* no need for Supersubs plugin */
    *white-space: normal; /* ...unless you support IE7 (let it wrap) */
    -webkit-transition: background .2s;
    transition: background .2s;
}
.sf-menu ul li {
    background: #AABDE6;
}
.sf-menu ul ul li {
    background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
    background: #CFDEFF;
    /* only transition out, not in */
    -webkit-transition: none;
    transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
    padding-right: 2.5em;
    *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -3px;
    height: 0;
    width: 0;
    /* order of following 3 rules important for fallbacks to work */
    border: 5px solid transparent;
    border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color: white;
}

(Le menu ul a la classe de sf-menu). Ce qui est encore plus intéressant, c’est que lors de la deuxième visite ou d’une autre visite de la même page, elle s’affiche correctement. Cependant, lors du premier chargement de l'instance IE, il est toujours incorrect.

EDIT: Lorsque je règle la règle de style de liste pour chaque ul à la place, cela fonctionne comme prévu.

javascriptjqueryhtmlcssinternet-explorer
33
David Apltauer

Répondre à Peter:

Aucune idée si cela serait mieux. Copié à partir du jquery git

list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
44
Dummy

J'ai eu un problème similaire dans IE11 et la définition du style de liste pour ul ne le résolvait pas. Mais j'ai trouvé la solution suivante ici qui a fonctionné pour IE11:

.sf-arrows li {
    list-style-image: url(data:0);
}
18
Peter

J'ai eu exactement le même problème dans IE 11.

Ajouter un style en ligne à l'élément <ul> a fonctionné pour moi:

<ul style="list-style: none;">

La définition de list-style: none dans un fichier CSS externe ne semblait pas fonctionner.

8
anna keren

Documenté ici

Avait le même problème. C'est un bug dans les styles 10 et 11. list-style: aucun n'est appliqué si la liste comporte également des styles affichés: aucun dans une feuille de style externe. Cela fonctionne si vous appliquez display none inline sur l'élément et le supprimez du fichier css externe. 

<ul style="display: none;"></ul>
7
user2333596

Ajoutez le style à l'UL

.flexnav ul {
    list-style: none;
    list-style-image: none;
    list-style-type: none;
}
3
Harshana Lasith

Positionner la balle à l'extérieur et appliquer un débordement caché sur le li l'a fait pour moi. Il est toujours là mais on ne peut pas le voir. Alors:

li {
list-style-position: outside;
overflow: hidden;
}
3
romain ni

Cette solution fonctionne parfaitement pour moi, le seul qui a fonctionné

.sf-arrows li {
list-style-image: url(data:0);
}

Merci de le partager

2
user1122002

J'ai eu le même problème avec IE10 et IE11. Utiliser <ul style="display: none;"></ul> n'a pas fonctionné pour moi mais 

.sf-arrows li {
    list-style-image: url(data:0);
}

travaillé parfaitement! La solution de Peter ci-dessus devrait être marquée comme la réponse.

1
Dave Cripps

Parmi les solutions ci-dessus, rien n’a fonctionné pour moi dans IE11, qui la plupart du temps a fait apparaître les points aléatoires et parfois non, en respectant le type de style de liste varoius, l’image de type liste, etc.

J'ai finalement résolu simplement en ajoutant list-style-type:none inline plutôt que dans mon fichier .css 

1
Emi-C

Pas joli, en utilisant jQuery, mais bon, c'est un bug ennuyeux. ( me prend vraiment en arrière mec! )

    // Mitigate IE/Edge bug showing bullets on lists which are hidden when loading the page
    $(document).ready(function(){
        if (document.documentMode || /Edge/.test(navigator.userAgent)) {
            $('ul:hidden').each(function(){
                $(this).parent().append($(this).detach());
            });
        }
    });
0
Maarten Wolzak

Pour résoudre ce problème, écrivez simplement le code suivant:

ul li {
list-style:none;
list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

J'espère que cela t'aides. :)

0
Daniel Barros

Il suffit de le placer dans la balise "head":

<style>
    ul { list-style-type:none }
</style>

De rien :)

0
Michał Reszka

avez-vous inspecté l'élément dans les outils F12 pour voir comment le CSS est appliqué? Dans IE 11, cliquez avec le bouton droit de la souris sur l'élément et sélectionnez inspecter élément pour vous y rendre rapidement.

Vérifié la cascade du réseau pour s'assurer que tous les fichiers ont bien été chargés (pas de fichiers 404 ou en attente)? 

0
Chris Love