Update 3/20/2012 - 已在IE10中修复

Question

我有<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>

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

ol issues

Answer 1

Update 3/20/2012 - 已在IE10中修复

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

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

Ordered list numbering changes from correct to 0, 0

输入：错误
   ID ：657695
  已打开：4/6/2011 12:10:52 PM
  访问限制：公开

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）：工作

Answer 2

另一种解决方案：）

显示元素：
```
     el.show();
```

然后：

 setTimeout(function(){
        $("ol").css("counter-reset", "item")
 }, 1);

Answer 3

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

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

Answer 4

在某些情况下，这似乎是一个错误，特别是涉及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显式分配。

这会强制重绘，并且 - 通过前面提到的警告 - 解决了问题。

Answer 5

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

var ieTimeout;
var selectorWrapperSet = $(selector);

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

Answer 6

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

我正在使用该代码;但是，我还是零。我修改它以在违规之后添加另一个OL，然后很快隐藏它。

“windows_instructions”是我正在修复零的OL。 “ie_fix”是我隐藏的虚拟OL。我尝试使用2 ms作为第二次超时;但是，时间不够。由于我的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);
    }

Answer 7

首先，除了CSS之外，我们可以看到这个bug。只要隐藏并显示<ol>，就会发生这种情况。 Example jsfiddle that shows bug.

在某些情况下，除了CSS 之外，还可以修复错误。修复是一致的，但代码很精致，而不是最好的。很多事情不应该在CSS中有所作为，所以请仔细编码。 Example jsfiddle that works.。基本思路是：切换行而不是列表，然后在{{1}上counter-reset和<ol>上counter-increment重新创建列表编号<li> }}。

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

谈论添加类，好像这个bug已经不够奇怪了，似乎<ol> 在IE中工作在类似第一个例子的情况下，如果Javascript添加了一个类包装元素 - 即使该类没有做任何事情。 Here's a jsfiddle example。不能保证它可以在其他任何地方工作，但它可以在这里工作。

如果你想了解这个错误，a）祝你好运，b）take a look at this jsfiddle here。如果您执行CSS counter选项（加上常规编号），但切换<ol>而不是<li>，则会发生这种情况。你得到了一个疯狂的情况，所显示的是完全不同的取决于你是从前一个兄弟，下一个兄弟，或两者都没有。没有任何意义......但这可能是这个bug究竟意味着什么的线索。

我也遇到了一个我无法复制的情况，编号是全1，全2，全3等等取决于它是<ol>：页面上的第一个变为1,1,1 ，1,1，第二个变为2,2,2,2,2，然后是3,3,3,3,3等。不能隔离是什么原因造成的怪癖。

Answer 8

从屏幕截图中看，您似乎在使用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>

Answer 9

您可能需要在样式表中添加以下标记片段 -

ol {list-style:decimal}

如果您还没有在样式表中声明它，那么它会声明您更喜欢的有序列表的类型。

Answer 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）而不是直接操作{ {1}}属性，所以我遇到了这个问题。

Answer 11

在Windows 10上遇到与Edge类似的问题。在使用css转换打开的移动菜单中的列表项旁边显示0。感觉就像我尝试了一百种list-style变种：none;和list-style-type：none;关于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;
  }
}

有序列表显示IE9中的所有零

11 个答案:

Update 3/20/2012 - 已在IE10中修复

显示错误的浏览器