asp.net - 有没有办法在 IE9 中使用有序列表和更新面板来解决这个问题？

Question

我在 IE9 中发现了一个令人讨厌的有序列表问题，我想知道是否有办法在不将有序列表更改为其他内容或摆脱更新面板行为的情况下修复它。

症状是，如果在更新面板中使用有序列表(或 BulletedList 控件)，初始化回发似乎会导致项目符号编号显示 0、0、0，而不是 1、2、3。

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

    <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 网站并点击调试)

这类似于 problems I've seen before与 CSS 相关，但这里不涉及 CSS。

有没有办法解决这个问题，还是我必须考虑不同的控件(例如中继器)？

我还没有在 IE8 或更低版本上测试过。但是，如果我更改 IE9 的渲染模式(通过 F12 开发人员工具)，我会得到以下结果:

浏览器模式

每个文档模式的结果相同(见下文)

文档模式

怪癖模式:工作正常

IE7 标准:工作正常

IE8 标准:突破

IE9 标准:突破

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

Answer 1

这真的很有趣，但是这个错误可能会被修复(鼓声)，用它的克隆替换 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>