有没有一种方法可以解决在IE9中有序列表和更新面板的问题？

Question

我发现IE9中有关有序列表的问题很烦人，想知道是否有方法可以修复它而不改变有序列表或者去掉更新面板行为。

症状是，在更新面板内使用有序列表（或BulletedList控件）时，初始化回发似乎会导致项目符号数字显示为0, 0, 0，而不是1, 2, 3。

通过以下代码可以轻松重现该问题：

```html

问题很容易通过以下代码重现：

```

    <asp:ScriptManager ID="sm1" runat="server" />
    <asp:UpdatePanel ID="upTest" runat="server">
        <ContentTemplate>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ol>
            <asp:Button ID="btnWhatever" runat="server" 
                Text="Click me to see IE break the list..." />
        </ContentTemplate>
    </asp:UpdatePanel>

（只需将其复制到空的ASP.NET网站中并点击调试）

这类似于与CSS相关的我以前看到的问题，但这里没有涉及CSS。

是否有解决此问题的方法，或者我必须考虑使用不同的控件（例如Repeater）？

我尚未在IE8或以下版本上进行测试。 但是，如果我通过F12开发人员工具更改IE9的呈现模式，则会获得以下结果：

浏览器模式

• 每个文档模式的结果相同（见下文）

文档模式

• 怪异模式：正常工作
• IE7标准：正常工作
• IE8标准：中断
• IE9标准：中断

编辑：这似乎是特定于IE的。 我无法在Google Chrome 15，FireFox 8或Opera 11.52上重现此问题。

- m-smith

---

这个问题似乎只出现在IE浏览器上，而且只在异步回发时才会出现。我不知道该如何修复它（直到现在我都没有意识到它的存在）。使用ASP.NET BulletedList（BulletStyle="Numbered"）也没有任何区别。 - Tim Schmelter

你的项目中使用jQuery吗？ - Yuriy Rozhovetskiy

@TimSchmelter确实 - 我最初使用BulletedList发现了这个问题，但在我的示例中仅使用<ol>来简化代码并显示它与BulletedList呈现方式无关（本质上...） - m-smith

@YuriyRozhovetskiy 不需要。主要项目使用AjaxControlToolkit，我们可能会在某个时候使用jQuery，但是您可以通过将我的问题中的代码复制到Default.aspx页面中，在空的ASP网站（或Web应用程序）项目中轻松重现此操作。甚至不需要设置任何代码后台。 - m-smith

Answer 1

这个bug的解决方法非常有趣，可以通过用它的克隆替换ajax请求返回的有序列表中的每个列表项来修复。

有两种可能的解决方案：第一种是使用纯javascript，第二种是使用jQuery：

<script type="text/javascript">
     Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

     function pageLoaded(sender, args) {
          if (args._panelsUpdated.length > 0) {

               // Plain javascript fix
               for (var panelIndex = 0; panelIndex < args._panelsUpdated.length; panelIndex++) {
                    var panel = args._panelsUpdated[panelIndex];
                    var orderedLists = panel.getElementsByTagName("ol");
                    for (var listIndex = 0; listIndex < orderedLists.length; listIndex++) {
                         var list = orderedLists[listIndex];
                         var listItems = list.getElementsByTagName("li");
                         for (var itemindex = 0; itemindex < listItems.length; itemindex++) {
                              var listItem = listItems[itemindex];
                              list.replaceChild(listItem.cloneNode(true), listItem);
                         }
                    }
               }

               // jQuery fix - bit less code
               $(args._panelsUpdated).find("ol>li").each(function () {
                    $(this).replaceWith($(this).clone(true, true));
               });
          }
     }
</script>

- Yuriy Rozhovetskiy

---

lol list.replaceChild(listItem.cloneNode(true), listItem); 基本上是“用自身的克隆替换”。太棒了！谢谢。 - m-smith