wake-up-neo.com

Internet Explorer 11 ignoriert Listenstil: Keine beim ersten Laden

Ich verwende das Superfish jQuery-Plugin für mein Menü. In Chrome und im mobilen Opera-Emulator funktioniert das einwandfrei. In Internet Explorer 11 gilt die CSS-Eigenschaft list-style:none jedoch nur für die oberste Ebene des Menüs und nicht für die umschaltbaren Untermenüs, obwohl dies in der Dev-Tools-Ansicht scheinbar für die entsprechenden Elemente gilt. Das führt dazu: Bugged menu Das verwendete dieses 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;
}

(Das Menü ul hat die Klasse des sf-Menüs). Was noch interessanter ist, ist, dass es beim zweiten oder anderen Besuch derselben Seite korrekt angezeigt wird. Beim ersten Laden der IE - Instanz wird jedoch immer falsch angezeigt.

BEARBEITEN: Wenn ich stattdessen die Listenstilregel für jede ul festlege, funktioniert sie wie erwartet.

javascriptjqueryhtmlcssinternet-explorer
33
David Apltauer

Antwort an Peter:

Keine Ahnung, ob das besser wäre. Aus dem jquery git kopiert

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

Ich hatte ein ähnliches Problem in IE11 und das Einstellen des Listenstils für die ul konnte das Problem nicht lösen. Ich fand aber die folgende Lösung hier die für IE11 funktionierte:

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

Ich hatte genau das gleiche Problem in IE 11.

Das Hinzufügen eines Inline-Styles zum <ul>-Element hat für mich funktioniert:

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

Die Einstellung von list-style: none in einer externen CSS-Datei schien nicht zu funktionieren.

8
anna keren

Dokumentiert hier

Hatte das gleiche Problem. Es ist ein Fehler in 10 und 11. list-style: none wird nicht angewendet, wenn in der Liste auch Styles angezeigt werden: none in einem externen Stylesheet. Es funktioniert, wenn Sie keine Inline-Anzeige auf das Element anwenden und es aus dem externen CSS entfernen. 

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

Fügen Sie den Stil dem UL hinzu

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

Die Kugel nach außen zu platzieren und einen versteckten Überlauf auf das Li anzuwenden, tat dies für mich. Es ist immer noch da, aber nicht zu sehen. So:

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

Diese Lösung funktioniert perfekt für mich, die einzige, die funktioniert hat

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

Vielen Dank für das Teilen

2
user1122002

Ich hatte das gleiche Problem mit IE10 und IE11. Die Verwendung von <ul style="display: none;"></ul> hat für mich aber nicht funktioniert 

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

funktionierte perfekt! Peters Lösung oben sollte als Antwort markiert werden.

1
Dave Cripps

Unter den oben genannten Lösungen funktionierte für mich in IE11 nichts, was die Punkte meistens zufällig auslöste und manchmal nicht, was den oben genannten varoius list-style-Typ, list-style-image usw. berücksichtigte.

Irgendwann löste ich einfach list-style-type:none inline anstelle von .css 

1
Emi-C

Nicht hübsch mit jQuery, aber hey, es ist ein verdammt nerviger Fehler. ( Nimmt mich wirklich zurück, Mann! )

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

Um diesen Fehler zu beheben, schreiben Sie einfach den folgenden Code:

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

Hoffe das hilft. :)

0
Daniel Barros

Platziere es einfach im "head" -Tag:

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

Bitte :)

0
Michał Reszka

haben Sie das Element in den F12-Tools geprüft, um zu sehen, wie das CSS angewendet wird? Klicken Sie in IE 11 mit der rechten Maustaste auf das Element und wählen Sie inspect element aus, um schnell dorthin zu gelangen.

Den Netzwerkwasserfall überprüft, um sicherzustellen, dass alle Dateien tatsächlich geladen wurden (keine 404s oder ausstehenden Dateien)? 

0
Chris Love