有没有办法解决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网站并点击Debug)

这类似于我以前看过的与CSS有关的问题,但这里没有涉及CSS.

有没有解决这个问题的方法,还是我必须考虑不同的控制(例如转发器)？

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

浏览器模式

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

文件模式

• Quirks模式:工作正常
• 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>