在第一次加载时，Internet Explorer 11忽略列表样式：none [英] Internet Explorer 11 ignores list-style:none on the first load

问题描述

我使用的Superfish jQuery插件为我的菜单。在Chrome和移动Opera模拟器它工作正常，但在Internet Explorer 11 CSS属性 list-style：none 仅适用于菜单的顶层，而不是切换子菜单，虽然在开发工具视图中，它似乎适用于适当的元素。结果是：
使用此CSS：

I am using the Superfish jQuery plugin for my menu. In Chrome and in mobile Opera emulator it works fine but in Internet Explorer 11 the CSS property list-style:none only applies to the top level of the menu and not to the toggled submenus, although in the dev tools view it seemingly applies to the appropriate elements. It results in this : The used this 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实例时，它总是显示错误。

(The menu ul has the class of sf-menu). What is even more interesting is that on the second or another visit of the same page it displays properly. However on the first load of the IE instance it always displays wrong.

编辑：当我为每个ul设置列表样式规则时， p>

When I set the list style rule for every ul instead, it works as expected.

推荐答案

我在IE11有一个类似的问题，并设置列表风格的ul没有解决它。但我发现以下解决方案此处适用于IE11：

I had a similar issue in IE11 and setting the list-style for the ul didn't solve it. But I found the following solution here which did work for IE11:

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

这篇关于在第一次加载时，Internet Explorer 11忽略列表样式：none的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！