Asp.net Infragistics WebDataMenu在Chrome中延迟格式化

考虑以下基础设施WebDataMenu的基本标记

    <ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px" StyleSetName="Office2007Blue" EnableTheming="True">
        <ClientEvents Initialize="myInit" />
        <GroupSettings Orientation="Horizontal" />
        <Items>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
            <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        </Items>
    </ig:WebDataMenu>

    <script>
        function myInit() {
            alert(1);
        }
    </script>

函数myInit（）{
警报（1）；
}

这是一个非常基本的标记，定义了宽度有限的10项水平菜单，因此启用了滚动。“Initialize”（初始化）事件中的警报表示执行基于初始化菜单维度的计算的部件

当此标记在IE或FF中运行时，在显示警报之前，菜单将显示正确的格式

但在chrome中，它看起来是未格式化的

---

如果页面上其他元素的位置和尺寸取决于菜单，则会出现问题。最终，菜单会重新评估自身（在上面的示例中，当用户在警报中单击OK时），但此时为时已晚。你知道是什么原因导致了它，以及如何解决它吗？

挖掘了一段时间后，我意识到在Chrome中，并且只有在Chrome中，当菜单

初始化

事件触发时，出于某种原因，菜单还没有完成初始化。因此，解决方案是将使用菜单维度（或者在我们的例子中是测试警报）的代码放入很久之后发生的事件中。我用window.load事件对它进行了测试，它似乎做到了这一点。删除上面标记中的客户端事件Initialize=“myInit”，并将以下内容添加到JavaScript中：

$addHandler(window, 'load', function () {
   setTimeout(myInit, 1)
});

这解决了代码问题，但当菜单调整自身大小时，仍然会看到一个短暂的跳转。解决方法是设置菜单的高度，如果不想硬编码，可以通过CSS来实现。将

CssClass=“topMenu”

添加到标记中的菜单属性，并将以下CSS添加到页面：

.topMenu {
   height:28px;
}

这与上面的代码结合使用scroll修复了WebDataMenu中的Chrome问题。以下是解决方案的完整标记：

<style type="text/css">
    .topMenu {
        height:28px;
    }
</style>

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px" CssClass="topMenu">
    <GroupSettings Orientation="Horizontal" />
    <Items>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
    </Items>
</ig:WebDataMenu>

<script>
    function myInit() {
        alert(1);
    }

    $addHandler(window, 'load', function () {
        setTimeout(myInit, 1)
    });
</script>

.topMenu{
高度：28px；
}
函数myInit（）{
警报（1）；
}
$addHandler（窗口，'load'，函数（）{
setTimeout（myInit，1）
});

从