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

Question

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

33

我有一个 <ol>（有序列表），在火狐、Safari和Chrome浏览器中渲染正常。然而，在IE9中，所有的数字都显示为0。这不是间距/填充问题，因为我能看到这些零。

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

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

列表问题

- Rkstarcass

3

您需要提供一张屏幕截图和更多的代码，包括CSS样式。我已经在IE9上测试过了，它运行良好。http://jsfiddle.net/rpjrj/ - Hawxby

1

你确定它是“零”，而不仅仅是一个圆圈吗？也许你的CSS有list-style-type:circle;我们确实需要更多的HTML和CSS。 - NakedBrunch

我的列表样式是有序列表，外部无样式。我怎么在这里添加截图？ - Rkstarcass

1

@Rkstarcass - 截图无法帮助。如果CSS不正确，这个bug有时会在Internet Explorer中发生。请给我们出现问题的网站URL，或使用jsfiddle.net发布您的代码。http://www.maratz.com/blog/archives/2006/10/15/internet-explorer-ordered-list-non-incrementing-list-item/似乎与您观察到的行为有关。 - duri

我也遇到了同样的问题 - 但只有在使用JQuery动态隐藏/显示包含有序列表的div时才会出现。更改list-style没有帮助。我的CSS太长了，无法在此处发布。IE9在9模式和8模式下都有这个问题。 - avioing

显示剩余4条评论

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrick Dark · Answer 1

编号问题发生在显示隐藏的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: https://dev59.com/8G035IYBdhLWcg3wKsua
    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属性，因此我遇到了这个问题。