Internet Explorer 11 игнорирует стиль списка: нет при первом загрузке

Я использую плагин Superfish jQuery для своего меню. В Chrome и в мобильном эмуляторе Opera он отлично работает, но в Internet Explorer 11 свойство CSS list-style:none применяется только к верхнему уровню меню, а не к переключаемым подменю, хотя в представлении инструментов разработчика он, по-видимому, применим к соответствующим элементам, Это приводит к следующему: Используется этот 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;
}

(Меню ul имеет класс sf-меню). Что еще более интересно, так это то, что во второй или другой визит той же страницы он отображается правильно. Однако при первом загрузке экземпляра IE он всегда отображается неправильно.

EDIT: Когда я устанавливаю правило стиля списка для каждой ul вместо этого, он работает как ожидалось.

Ответ 1

Ответ Питеру:

Не знаю, было бы лучше. Скопировано из jquery git

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

Ответ 2

У меня была аналогичная проблема в IE11, и установка стиля списка для ul не решила его. Но я нашел следующее решение здесь, которое действительно работало для IE11:

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

Ответ 3

У меня была точно такая же проблема в IE 11.

Добавление встроенного стиля в элемент <ul> работало для меня:

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

Установка list-style: none во внешнем файле CSS, похоже, не работает.

Ответ 4

Документировано здесь

Была такая же проблема. Это ошибка в т.е. 10 и 11. list-style: ни один не применяется, если список также имеет отображаемые стили: ни один во внешней таблице стилей. Это работает, если вы примените display no inline к элементу и удалите его из внешнего CSS.

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

Ответ 5

Добавьте стиль в UL

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

Ответ 6

Располагая пулю снаружи и применяя скрытое переполнение на ли, я сделал это для меня. Он все еще там, но его нельзя увидеть. Итак:

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

Ответ 7

Это решение отлично работает для меня, единственное, с кем работал

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

Спасибо, что поделились ею.

Ответ 8

У меня была такая же проблема с IE10 и IE11. Использование <ul style="display: none;"></ul> не сработало для меня, но

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

работал отлично! Решение Питера выше должно быть отмечено как ответ.

Ответ 9

Среди вышеперечисленных решений ничто не работало для меня в IE11, которое в большинстве случаев случайно выпадало из точек, а иногда и не было, уважая тип списка в стиле varoius, стиль списка и т.д., как было предложено выше.

В конечном итоге я решил просто добавить list-style-type:none inline, а не в мой .css

Ответ 10

Просто поместите его в тег "head":

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

Добро пожаловать :)

Ответ 11

Вы проверили элемент в инструментах F12, чтобы увидеть, как применяется CSS? В IE 11 щелкните элемент правой кнопкой мыши и выберите элемент проверки, чтобы быстро найти вас.

Проверьте сетевой водопад, чтобы убедиться, что все файлы загружены (нет файлов 404 или ожидающих ответа)?

Ответ 12

Не очень, используя jQuery, но это чертовски надоедливая ошибка. (Действительно забирает меня обратно человек!)

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

Ответ 13

Чтобы исправить эту ошибку, просто напишите следующий код:

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

Надеюсь это поможет. :)

Ответ 14

Я часто сталкиваюсь с этой проблемой. Я считаю, что обёртывание моего CSS в медиа-запросе @media list-style:none; обычно работает.