是否可以通过IE9中的有序列表和更新面板来解决此问题? [英] Is there a way to work around this issue with ordered lists and update panels in IE9?

问题描述

我发现IE9中的有序列表令人讨厌，并且我想知道是否有一种方法可以解决此问题，而无需将有序列表更改为其他内容或摆脱更新面板的行为.

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

通过以下代码可以很容易地重现该问题:

    <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或更低版本上对此进行测试.但是，如果我更改了IE9的呈现模式(通过F12开发人员工具)，则会得到以下结果:

浏览器模式

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

文档模式

• Quirks模式:可以正常工作
• IE7标准:效果很好
• IE8标准:中断
• IE9标准:中断

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

解决方案

这真的很有趣，但是可以通过用克隆替换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>

I have discovered an annoying issue with ordered lists in IE9 and am wondering if there's a way to fix it without changing the ordered list into something else or getting rid of the update panel behaviour.

The symptoms are that, if an ordered list (or BulletedList control) is used within an update panel, initialising a postback seems to cause the bullet numbers to display 0, 0, 0, instead of 1, 2, 3.

The problem is easily reproducible via the following code:

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

(Just copy that into a blank ASP.NET website and hit Debug)

This is similar to problems I've seen before to do with CSS, but there's no CSS involved here.

Is there a way around this issue, or do I have to consider a different control (e.g. a Repeater)?

I haven't tested this on IE8 or below yet. However, if I change the rendering mode of IE9 (via the F12 Developers Tools), I get the following results:

Browser Mode

• Same results for each Document Mode (see next)

Document Mode

• Quirks Mode: Works fine
• IE7 Standards: Works fine
• IE8 Standards: Breaks
• IE9 Standards: Breaks

EDIT: This does seem to be specific to IE. I have not been able to reproduce this issue on Google Chrome 15, FireFox 8 or Opera 11.52.

解决方案

It's really very funny but this bug may be fixed (drum roll) with replacing each list item in ordered lists returned by ajax request with it's clone.

There are two possible solutions: first one with plain javascript and second one with 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>

这篇关于是否可以通过IE9中的有序列表和更新面板来解决此问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！