如何摆脱丑陋的asp:菜单闪烁？

Question

我正在使用asp:Menu具有无表格渲染模式的ASP.NET 4.0 Webforms页面上的控件:

<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
    Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List" 
    IncludeStyleBlock="false">
</asp:Menu>

菜单有一个水平主行,有5或6个菜单项,当用户将鼠标悬停在菜单项上时,其中一些菜单项打开垂直弹出菜单.

通常当发生任何回发并且页面再次呈现时,菜单"闪烁"一会儿(例如,半秒),这意味着:所有菜单项 - 包括弹出菜单中的项目 - 以一行或多行显示在他们恢复到正常预期状态之前彼此相互对立.

在所有菜单项"展开"显示的这个短暂时刻,菜单看起来如果在浏览器中禁用了Javascript.(似乎构建弹出菜单是通过在asp:menu控件中使用一些Javascript来实现的.)

这种行为非常难看,特别是对于一个大菜单(渲染短时间超过2或3行),整个页面内容在跳回到正常显示之前向下移动.

你知道这个问题的解决方案吗？

先感谢您!

(备注:我应该提一下,在升级到ASP.NET 4.0之前,我使用了CodePlex中着名的CSS友好菜单控件.我认为我不再需要CSS友好控件,因为asp:菜单版本4现在提供了一个内置的List渲染模式.据我所知,我没有使用CSS友好控件的闪烁,我认为这个控件没有使用Javascript.也许这是一个糟糕的一步.我是现在寻找一个解决方案,如果可能的话,不要回到CSS友好的菜单控件.)

编辑:

这种闪烁与浏览器无关,虽然在IE 8和7中最为明显.在IE 7(或IE 8中的兼容模式)中,它非常难看,因为菜单项以疯狂的对角线模式显示,甚至超过5或6行.

Answer 1

如果还有人需要解决方案; 闪烁是因为您应该在css中为菜单设置正确的显示样式.

试试这个例子

#menu ul li ul
{
    display: none;
}

和

#menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}

闪烁是因为ASP.NET 4菜单使用javascript来设置一些内联样式.

Answer 2

每当我在CSS文件和onload事件之间的页面中进行大量操作时,我也会发现这个问题,这可能会触发javascript来装饰菜单项.特别是在IE8中,javascript修复样式的延迟很难看.

peter和Clearcloud8的解决方案对我来说几乎都很好.我用这个:

div.menu > ul > li
{ 
    display: inline-block;
    list-style: none; 
} 

div.menu ul li ul 
{ 
    display: none; 
}

主要区别在于我使用了"div.menu> ul> li",它只针对最上面的一行项目,而不是"div.menu ul li",它也会影响子菜单 - 结果是子菜单项是不一样的宽度,所以他们在一个锯齿状的列表中下降.

(我使用的是Visual Studio 2010,.Net Framework 4)

Answer 3

将这些行添加到Site.css文件(在VS 2010项目的Styles文件夹中)

/* Fix for extra space above menu in Chrome and Safari */
img[alt='Skip Navigation Links'] {
display: none;
}

另一种方法是将SkipLinkText =""添加到每个菜单项(尚未测试过)