【问题标题】：Ordered list showing all zeros in IE9在 IE9 中显示全零的有序列表
【发布时间】：2011-07-31 20:49:18
【问题描述】：

我有一个<ol>（有序列表），并且在 FF、Safari、Chrome 中可以正确呈现。但是在 IE9 中它显示全零。这不是间距/填充问题，因为我能够看到零。

我的 HTML 如下：

<ol> 
    <li>Enter basic company information</li> 
    <li>Select from our portfolio of products</li> 
    <li>Attach your employee census</li> 
    <li>Review your selections and submit your request.</li> 
</ol>

有人遇到过这个问题并希望有解决方案吗？

【问题讨论】：

我建议提供给您带来麻烦的 HTML - 以及应用到它的任何样式（直接或继承）。
你有截图吗？还是代码示例？
您将不得不提供屏幕截图和更多代码，包括 css。我已经在 IE9 上测试过了，它运行良好jsfiddle.net/rpjrj
你确定它是一个“零”而不是一个圆圈吗？也许你的 CSS 有 list-style-type:circle;我们真的需要更多的 HTML 和 CSS。
@Rkstarcass - 截图无济于事。 IIRC 由于不正确的 CSS，此错误有时会出现在 Internet Explorer 中。请给我们出现问题的网站的 URL，或使用 jsfiddle.net 发布您的代码。 maratz.com/blog/archives/2006/10/15/… 似乎与您正在观察的行为有关。

标签： html internet-explorer-9 html-lists

【解决方案1】：

从您的屏幕截图看来，您使用的是 SharePoint。我猜测 SharePoint 中现有的 CSS 设置会导致一些 CSS 干扰。

作为测试，尝试将您的 ol 样式声明为内联，看看是否有帮助。

<ol style="list-style-type:decimal;"> 
    <li>Enter basic company information</li> 
    <li>Select from our portfolio of products</li> 
    <li>Attach your employee census</li> 
    <li>Review your selections and submit your request.</li> 
</ol>

【讨论】：

【解决方案2】：

2012 年 3 月 20 日更新 - 已在 IE10 中修复

此回归已在 Internet Explorer 10（所有文档模式）中得到修复。 Microsoft 已删除 Connect 条目，因此您无法查看其状态。由于微软现在自动下推 IE10，它应该适用于您所有的老客户。

这是已知的 IE9 回归，已在 Microsoft Connect 上报告：

Ordered list numbering changes from correct to 0, 0

类型：错误
ID：657695
打开：2011 年 4 月 6 日下午 12:10:52访问限制：公开

0 解决方法
5 用户可以重现此错误

更新：

由 Microsoft 于 2011 年 6 月 14 日下午 3:20 发布
感谢您的反馈意见。

我们能够重现该问题并正在对其进行调查。

最好的问候，

Internet Explorer 团队

重现错误的 HTML 页面：

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>IE9 Ordered List Zero Bug</TITLE>
<SCRIPT type="text/javascript">
    setTimeout(function ()
        {
            document.getElementById("dv1").innerHTML = "<ol><li>XXX</li><li>YYY</li></ol>";
            var container = document.createElement('span');
            container.style.cssText = "display:none";
            document.getElementById("dv2").appendChild(container);
        }, 1000);
</SCRIPT>
</HEAD>
<BODY>

<DIV id="dv1">
    <OL>
    <LI>AAA</LI>
    <LI>BBB</LI>
    </OL>
</DIV>

<DIV id="dv2"></DIV>

</BODY>
</HTML>

A workaround 是在你的DIV 之后放置一个空元素：

<div id="one">
   <ol>
      <li>one</li>
      <li>two</li>
   </ol>
</div>
<div id="two" style="display:none">
   <ol>
      <li>three</li>
      <li>four</li>
   </ol>
</div>
<div id="empty"></div>

出现错误的浏览器

Internet Explorer 9 (9.0.8112.16421)

文档模式怪癖：作品
文档模式 IE7 标准：有效
文档模式 IE8 标准：失败
文档模式 IE9 标准：失败

Internet Explorer 8 (8.0.6001.19048)

文档模式怪癖：作品
文档模式 IE7 标准：有效
文档模式 IE8 标准：有效

Internet Explorer 7 (7.0.6000.16982)： 工作

Google Chrome 10 (10.0.648.134)： 工作

【讨论】：

尝试访问 microsoft connect 链接（已注册）时找不到页面。有这方面的信息吗？谢谢
该页面（仍然）在 Microsoft Connect 上。在 MS 的确认下更新了答案。
该死，似乎对我不起作用。更新：隐藏+显示w。延迟有效！
我投了赞成票，但您应该在解决方法中包含 JS 组件。 IE。调用 document.getElementById('empty').innerHTML = ' ';在你调用你的 JS 显示方法之后。
@JoshStuart 我会提供一个解决方法，但我不知道。

【解决方案3】：

这似乎是某些情况下的错误，特别是那些涉及 AJAX 的情况。本文通过步骤重现但没有给出任何解决方案：

http://blog.darkthread.net/post-2011-03-19-ie9-ol-bug.aspx

注意文章是中文的；我用 Chrome 翻译的。

这是一个工作小提琴，它表明可以动态更新列表而不会出现问题：

http://jsfiddle.net/6tr9p/18/

不幸的是，当需要组合 AJAX/IE9/Ordered Lists 时，这并不能解决问题，如果 OP 使用的是 SharePoint，这可能就是这种情况。

在我自己在这个问题上浪费了几个小时之后，我可以确认（在 SharePoint 之外）这绝对是 Windows 7 上的 IE 9.0.8112 上的一个问题。它似乎也影响了用于实现有序列表的 CSS counter-increment 方法也一样（即它不起作用；列表项仍然全部用零编号）。

如果我找到比“处理它”/“删除 AJAX”更好的解决方案，我会更新我的答案。

编辑：这是我的“更好的答案”。

此代码仅经过初步测试，涉及到 AJAX 客户端 API 的挂钩。它可能会在其他版本的 IE 或其他浏览器中中断。使用风险自负。

也就是说，它修复了在 IE9 中显示全零的有序列表的行为，同时定义了隐式和显式开始编号（通过 start 属性）。请注意，HTML 5 中不再不推荐使用 start 属性。

function endRequest_OL_Fix(sender, args) {
    var ols = document.getElementsByTagName("ol");

    for (var i = 0; i < ols.length; i++) 
    {
        var explicitStart = ols[i].start;

        if (explicitStart > 0) {
            ols[i].start = -1;
            ols[i].start = explicitStart;
        }
        else {
            ols[i].start = 1;
        }
    }
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest_OL_Fix);

一旦请求完成（包括异步请求），页面上的所有 OL 标记都会被检查。如果他们有明确定义的start 属性，它将被保留、重置和重新分配。否则，start 将被显式分配。

这会强制重绘，并且 - 带有上述警告 - 解决了问题。

【讨论】：

这个错误在我看来与 AJAX 没有任何关系。只需切换可见性即可。
@Pointy - 如果我记得，我在 AJAX 请求后将元素插入 DOM 时特别遇到了麻烦，所以我认为它必须是动态节点创建/插入导致问题（这就是我的答案测试并尝试修复）。很高兴您发表评论；自从我发布答案以来，有关该问题的更多信息。从那以后，我在其他场景中遇到过。
非常感谢您的回答，因为它是页面上唯一适合我的回答:-)

【解决方案4】：

您的样式表中可能需要以下标记的 sn-p -

ol {list-style:decimal}

如果你还没有在你的样式表中声明它，它的作用是声明你喜欢的有序列表的类型。

【讨论】：

缺少默认列表样式不会导致在 Chrome、FF、IE 8 或 IE 9 中显示零：jsfiddle.net/jazhx
您的权利，但它们可能已被更具体的属性所统治。
可能。诸如 FF、Chrome、IE 等可用的 DOM 检查器将是 OP 查找的第一个位置。虽然我会质疑谁会首先定义一个将所有 OL 设置为零的规则。

【解决方案5】：

我自己最近遇到了这个问题，并提出了一个与包含空 div 不同的解决方案。绝对可以在不同的场景中使用更多的测试，但这对我有用，即使列表被隐藏并再次显示。

var ieTimeout;
var selectorWrapperSet = $(selector);

selectorWrapperSet.css("display","none");
ieTimeout = setTimeout(function() {
selectorWrapperSet.css("display","block");
}, 1);

【讨论】：

【解决方案6】：

空 div 解决方法对我不起作用。这里有一些简单的 jQuery 可以解决问题。

// Workaround for IE list display bug
$('ol').hide().delay(1).show();

【讨论】：

我发现这只有在“表演”完成后才有效。对我来说，这是解决方案： setTimeout(function(){$('ol').hide().delay(1).show();}, 2);
这对我有用。如果您使用的是旧版本的 jQuery（没有延迟方法），您可以将 show() 函数设置为在 hide() 函数之后执行的回调。

【解决方案7】：

另一种解决方案:)

显示元素：
el.show();
然后：
设置超时（函数（）{ $("ol").css("counter-reset", "item") }, 1);

【讨论】：

这不（总是？）工作。进行“计数重置”更新（有时？）修复了一个/一些 <li> 元素，但不是全部。

【解决方案8】：

@Alex Kleshchevnikov - http://choosedaily.com/2481/ie9-bug-ordered-list-zeroes-ajax-request/

我正在使用该代码；但是，我仍然得到零。我已经对其进行了修改，以便在有问题的 OL 之后添加另一个 OL，然后不久将其隐藏。

"windows_instructions" 是我正在为其修复零的 OL。 “ie_fix”是我隐藏的虚拟OL。我尝试使用 2 毫秒作为第二次超时；但是，时间还不够。由于我的 ajax 内容逐渐消失，我没有得到 100 毫秒的 FOUC。

如果它对未来的修复有帮助，那么问题似乎总是与页面上的最后一个 OL 相关。

代码如下：

if($("#windows_instructions").length>0)
    {
        $("#windows_instructions").hide();
        ieTimeout = setTimeout(function() 
        {    
            $("#windows_instructions").show();
        }, 1);
        ieTimeout = setTimeout(function() 
        {    
            $("#ie_fix").hide();
        }, 100);
    }

【讨论】：

DIV 解决方法后的空元素对我不起作用。在我的情况下，在 AJAX PostBack 将新的有序列表添加到 UpdatePanel 后，会出现 IE 9 有序列表问题。隐藏和显示包含有序列表的 Div 效果很好！ :)

【解决方案9】：

首先，只有 CSS 才能看到这个错误。每当<ol> 被隐藏和显示时，都会发生这种情况。 Example jsfiddle that shows bug.

在某些情况下，也可以仅使用 CSS 来修复错误。修复是一致的，但代码很微妙，不是最好的。 不应该在 CSS 中产生任何影响的许多事情在这里都做了，因此请仔细编码。 Example jsfiddle that works.。基本思路是：切换行而不是列表，然后在<ol>（可见但有时为空）上使用counter-reset 和<li> 上的counter-increment 重新创建列表编号。

优点：这里的所有内容都可以隐藏在一个仅限 IE 的样式表中。如果 :hover 在您的情况下没有意义并且您使用 jQuery .show() 之类的东西，请考虑使用基于 .addClass() 的东西。

说到添加类，好像这个错误已经不够奇怪了，如果 Javascript 将类添加到包装器中，则 IE 中的<ol>s 工作类似于第一个示例element - 即使该类不做任何事情。 Here's a jsfiddle example。不能保证在其他任何地方都可以使用，但在这里可以使用。

如果你想了解这个错误，a) 祝你好运，b) take a look at this jsfiddle here。如果您执行 CSS counter 选项（加上常规编号），但切换 <ol>s 而不是 <li>s，就会发生这种情况。你会遇到一种疯狂的情况，显示的内容完全不同，具体取决于您是从上一个兄弟姐妹、下一个兄弟姐妹还是两者都悬停在鼠标上。毫无意义……但它可能是关于这个错误到底意味着什么的线索。

我也遇到了一种情况，我无法复制编号全为 1、全为 2、全为 3 等的情况，具体取决于 <ol>：页面上的第一个变为 1,1,1,1 ,1，第二个变为 2,2,2,2,2，然后是 3,3,3,3,3 等。无法确定导致该怪癖的原因。

【讨论】：

【解决方案10】：

编号问题在显示隐藏的 ol 元素后发生，可以通过在显示 ol 元素后通过 JavaScript 修改或添加类属性到包含 ol 元素的元素来解决。下面的代码不会以任何实质性的方式修改现有的类属性，不会在 DOM 中留下空的类属性，不需要 jQuery，并且只允许 Trident 5.0 浏览器（例如 IE9）执行代码：

if (/Trident\/5.0/.test(navigator.userAgent)) { // Windows Internet Explorer 9 Bug Fix
    // Official Bug Report: https://connect.microsoft.com/IE/feedback/details/657695/ordered-list-numbering-changes-from-correct-to-0-0
    // Bug Fix: http://stackoverflow.com/questions/5584500/ordered-list-showing-all-zeros-in-ie9
    if (listContainerElement.hasAttribute("class")) {
        listContainerElement.setAttribute("class", listContainerElement.getAttribute("class"));
    }
    else {
        listContainerElement.setAttribute("class", "");
        listContainerElement.removeAttribute("class");
    }
}

也可以通过 JavaScript 设置 display 属性来解决此问题：

listContainerElement.style.setProperty("display", someDisplayPropertyValue);

在我的例子中，我通过在包含 ol 元素的元素上删除和添加 HTML5 hidden 属性来显示和隐藏列表（与 [hidden] { display: none; } 兼容 IE9），而不是直接操作 display 属性，所以我遇到了这个问题。

【讨论】：

【解决方案11】：

在 Windows 10 上与 Edge 有类似的问题。它在使用 CSS 转换打开的移动菜单中的列表项旁边显示 0。感觉就像我尝试了一百种列表样式的变体：无；和列表样式类型：无；关于ol，它的父母和后代。

最终在 Edge / IE 中修复它，但不会弄乱适用于所有其他桌面和移动浏览器的样式：

/*
  Hack for Edge browser. Some things never change...
  This is definitely dirty, hacky and overkill.
  Without this, Edge on windows 10 shows a 0. next to every list item in a mobile menu that is animated with a css transition on our site.
  Using technique for targeting Edge from https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css
  Answer by KittMedia: https://stackoverflow.com/a/32202953/
*/
@supports (-ms-ime-align: auto) {
  .element-im-targeting ol,
  .element-im-targeting ol li,
  .element-im-targeting ol * {
    list-style: none;
    list-style-type: none;
  }
}

【讨论】：