Internet Explorer 11 在第一次加载时忽略 list-style:none答案

【问题标题】：Internet Explorer 11 ignores list-style:none on the first loadInternet Explorer 11 在第一次加载时忽略 list-style:none
【发布时间】：2013-12-19 19:33:14
【问题描述】：

我正在为我的菜单使用 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-menu 类）。更有趣的是，在第二次或再次访问同一页面时，它会正确显示。但是在第一次加载 IE 实例时，它总是显示错误。

编辑：当我为每个 ul 设置列表样式规则时，它按预期工作。

【问题讨论】：

Welp，10 很好...欢迎回到正常的 IE ...想知道这是否意味着 FF 最终会解决它的 CSS 崩溃 JS 问题并重新成为一个有用的浏览器...跨度>
你能贴出重现问题的小提琴吗？因为这里没有发生：jsfiddle.net/tyqSm/1

标签： javascript jquery html css internet-explorer

【解决方案1】：

回复彼得：

不知道这是否会更好。复制自jquery git

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

【讨论】：

这是最好的答案！谢谢！
太棒了！为我工作。感谢您钻研 jquery git 并发现这一点，太棒了:)
你把这个应用到
- 上？
@stackingjasoncooper 我把它应用到
1. 上，效果很好。
这对我有用。下面的答案——url(data:0)——没有。对于那些想知道的人，上面的代码为透明图像创建了最小的数据 URI。（通过stackoverflow.com/questions/6018611/…）

【解决方案2】：

我在 IE11 中遇到了类似的问题，为 ul 设置列表样式并没有解决它。但我发现以下解决方案 here 确实适用于 IE11：

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

【讨论】：

这会在 Chrome 中产生 404 错误，并消耗 200 毫秒的加载时间。请参阅下面 Dummy 的回答，以更好地了解这种方法。
或者只是将其包装在 IE/Edge 媒体查询中？
这是唯一对我有用的解决方案。

【解决方案3】：

记录在案的here

遇到了同样的问题。这是 ie 10 和 11 中的一个错误。 list-style: none 如果列表也有样式 display: none 在外部样式表中，则不会应用。如果您在元素上应用 display none inline 并将其从外部 css 中删除，它将起作用。

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

【讨论】：

这应该被标记为解决方案。完美运行。

【解决方案4】：

我在 IE 11 中遇到了完全相同的问题。

向<ul> 元素添加内联样式对我有用：

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

在外部 CSS 文件中设置 list-style: none 似乎不起作用。

【讨论】：

这个方法对我有用，但是.. 这个 IE-Bug 也与列表样式的位置混淆。为了解决这个问题，我还在元素中添加了“list-style-position: inside”：

【解决方案5】：

将样式添加到 UL

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

【讨论】：

这应该是选择的答案，因为它解决了 IE 上需要解决的实际样式，而不是此处发布的其他解决方法。
我 100% 同意 @bit-less，这是正确 （并且仍然相关） 的答案。显式设置每个属性解决了我在 Microsoft Edge 42.17134.1.0 中遇到的 Bootstrap 3.3.7 .dropdown-menu 问题。

【解决方案6】：

将子弹定位在外面并在 li 上应用隐藏的溢出为我做了这件事。它仍然存在，但看不到。所以：

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

【讨论】：

这很完美；我还将这两行包装在这个媒体查询中，只影响 IE，因为它脱离了第一个 li 的边缘顶部。 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

【解决方案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 中对我没有任何帮助，大多数时候随机弹出点，有时不会，尊重上面建议的各种列表样式类型、列表样式图像等。

我最终通过添加 list-style-type:none inline 而不是在我的 .css 中解决了

【讨论】：

【解决方案10】：

只需将其放在“head”标签中即可：

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

你很高兴:)

【讨论】：

【解决方案11】：

我尝试了上述所有解决方案，但唯一对我有用的是将 li 元素的颜色设置为白色（背景颜色）并使用 span 标签将文本包装在 li 内并设置颜色将span 元素转换为标准颜色。像这样：

<style>
li {
color: white;
}
li span {
color: black;
}
</style>

<ul>
<li><span>Some text</span></li>
<li><span>Some text</span></li>
<li><span>Some text</span></li>
</ul>

我知道这不是最佳做法，但确实是某种解决方法。

【讨论】：

【解决方案12】：

您是否检查过 F12 工具中的元素以了解 CSS 是如何应用的？在 IE 11 中右键单击元素并选择检查元素以快速到达那里。

检查了网络瀑布以确保所有文件都已实际加载（没有 404 或待处理文件）？

【讨论】：

【解决方案13】：

不漂亮，使用 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());
            });
        }
    });

【讨论】：

【解决方案14】：

要修复此错误，只需编写以下代码：

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

希望这会有所帮助。 :)

【讨论】：

【解决方案15】：

我经常遇到这个问题。我发现用list-style:none; 将我的CSS 包装在@media 的媒体查询中通常是可行的。

【讨论】：