如何摆脱丑陋的asp：菜单闪烁？答案

【问题标题】：How to get rid of ugly asp:Menu flickering?如何摆脱丑陋的asp：菜单闪烁？
【发布时间】：2011-03-15 12:41:00
【问题描述】：

我在一个 ASP.NET 4.0 Webforms 页面上使用asp:Menu 控件，该页面具有无表呈现模式：

<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 中的菜单现在提供了一个内置的列表渲染模式。据我所知，我没有这种闪烁的 CSS 友好控件，我认为这个控件没有使用 Javascript。也许这是一个糟糕的步骤. 如果可能的话，我现在正在寻找一种解决方案，而无需返回对 CSS 友好的菜单控件。）

编辑：

这种闪烁与浏览器无关，尽管在 IE 8 和 7 中最为明显。在 IE 7（或 IE 8 中的兼容模式）中，它非常难看，因为即使超过 5 或 6 行，菜单项也会以疯狂的对角线模式显示。

【问题讨论】：

您没有提到您正在使用母版页，但是此问题中的一些答案可能会有所帮助（不确定您是否已经看过）。 stackoverflow.com/questions/888245/…
感谢您的链接！这有很大帮助！我没有看到这个问题。是的，我正在使用母版页，乍一看，似乎将菜单包含在其自己的 ContentPlaceHolder 中的解决方案正在运行。我最终必须在实时服务器上对其进行测试，因为在我的开发机器上我不会经常出现这种闪烁。在互联网上具有正常“实时延迟”的生产服务器上更为明显。
不幸的是，在具有真实延迟的实时服务器上进行的测试表明，将菜单包含在其自己的 ContentPlaceHolder 中的解决方案并没有真正起作用。闪烁仍然存在（在 IE 8（有和没有兼容模式）和 Firefox 中测试）。

标签： asp.net menu asp.net-4.0 aspmenu-control

【解决方案1】：

如果有人仍然需要解决方案；闪烁是因为您应该在 CSS 中为菜单设置正确的显示样式。

试一试

#menu ul li ul
{
    display: none;
}

和

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

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

【讨论】：

是的！我仍然需要一个解决方案。但现在我有一个，谢谢你！我只在#menu ul li ul 中添加了display:none 并且闪烁消失了。刚刚在 IE 7+8、Firefox、Chrome 和 Opera（它们都显示此菜单闪烁）的实时服务器上进行了快速测试，现在运行顺利。再次感谢您，这真的是一个很大的帮助！
这是这个问题的完美解决方案。简单但有效！
我的问题仍然存在:(

【解决方案2】：

每当我在 CSS 文件和可能触发 javascript 来装饰菜单项的 onload 事件之间的页面中发生很多事情时，我也会遇到这个问题。特别是在 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）

【讨论】：

我也遇到了菜单锯齿状的问题。呃，我想知道为什么这个控件必须给我带来这么多麻烦——内置不少！

【解决方案3】：

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

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

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

【讨论】：

在菜单标签中添加 SkipLinkText="" 非常适合 Chrome 摆脱菜单上方的额外空间！

【解决方案4】：

我已经尝试了推荐的解决方案，即..

div.menu ul li ul { display:none }

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

.. 它解决了闪烁问题，但引入了另一个问题，即菜单项锯齿状。

菜单的默认渲染方向是垂直的，闪烁只发生在水平菜单上。 float:left 和 position:relative 通过将菜单项折叠到左侧单元格位置来工作，所有项目都覆盖在一个区域中。这会阻止页面跳来跳去。 float:left 还将菜单项的大小缩小到它所包含的文本大小（锯齿状菜单问题）。

垂直菜单不需要这些修复。

适合我的解决方案是

div.menu { height:24px }

div.menu li { right:0; position:absolute; top:0 }

这实现了相同的结果，并将所有菜单项放置在左侧的单个空间中，菜单将在此处呈现，但不使用 float:left，它使菜单项的默认宽度为 auto。菜单高度为菜单区域提供了一个恒定的空间，并且基于我用于水平静态菜单的高度。

此设置不会导致菜单出现锯齿状。

【讨论】：

【解决方案5】：

我补充说：

.menu ul li ul
{
    display: none;
}

.menu ul li 
{
    position: relative; 
    /*float: left;*/
    list-style: none;
}

在 ccs 文件的底部，当我发布应用程序时，闪烁效果减少了。在更改之前，菜单项几乎覆盖了整个页面，而在您的解决方案之后只有 5 或 6 行！！！。

这是我的母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SantaMaria.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

<script type="text/javascript" src="../Scripts/j_commons.js"></script>

    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    <asp:Literal ID="CompanyName" runat="server"></asp:Literal>
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <%=Xsite.Override.getOverride("SiteMaster", "Welcome") %>    
                        <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Account/Login.aspx?ReturnUrl="/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                </asp:Menu>
            </div>
        </div>
        <div class="main" style="height:800px">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

这是 asp:menu 的 ccs 文件定义（没有我粘贴在 ccs 文件底部的新行）：

div.hideSkiplink 
{
    background-color: /*#3a4f63;*/ #666666;
    width: 100%;
}

div.menu
{
    padding: 2px 0px 2px 4px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    z-index: 10; /*Se estaba mostrando el submenu, mezclado con la pantalla de abajo!*/
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

菜单项是从 xml 文件加载的。

好吧，我要感谢您对“如何摆脱丑陋的 asp：菜单闪烁？”的所有回答。我将继续调查以找到完整的解决方案。再次感谢！！！

【讨论】：

【解决方案6】：

我也遇到了同样的问题。但通过删除 jquery 调用解决了。 :) 或者您可以下载 .js 脚本文件并将其保存在脚本文件夹中，而不是从网上引用它。

【讨论】：

【解决方案7】：

#menu ul li ul 
{ 
    display: none; 
} 

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

这也对我有用。在我在表格上放置 reCaptcha 之前，我没有遇到任何问题。我的菜单也在母版页中制作。非常感谢！

【讨论】：

【解决方案8】：

自从使用 ASP.NET 4.5.1 以来，我遇到了同样的问题，虽然我尝试使用上面的 CSS 样式标签，但我无法防止闪烁。但是，通过比较旧站点的 HTML 源代码和新站点的 HTML 源代码，很明显，缺少 {display: none} 标记。我只是通过调整 web.config 来帮助自己

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

这很有帮助，因为它生成了与以前相同的 HTML 源代码，尽管它肯定不是一个好的解决方法。

【讨论】：

【解决方案9】：

上述解决方案很接近，但对我不起作用。为了解决所描述的问题，它需要在下面进行轻微修改。当我使用 Visual Studio 2010 创建一个新的 ASP.NET Web 表单应用程序项目时，默认情况下为菜单生成的 CSS 使用“.menu”（CSS 类）来应用样式而不是“#menu”（一个元素ID 为“菜单”）。

#菜单 - 不工作

.menu - 确实有效

所以，换句话说，把它放在靠近底部的 CSS 文件中：

.menu ul li ul
{
    display: none;
}

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

【讨论】：

# (hash) 用于通过 id 选择 while 。（点）用于按类别选择。所以两者都可以根据上下文使用

【解决方案10】：

这显然有效（上面的建议），直到我刚刚使用 nuget 将我的 jQuery 更新到 2.1.1 并开始使用 CDN（由 YSLow 建议）。但现在这种闪烁又回来了，比以往任何时候都更糟。任何人检查它是否有更好的解决方案？谢谢。

我也找到了这个解决方案，但没有运气：（在头上）

<style type="text/css">
                div.menu ul li ul { display:none; }
    </style>

【讨论】：

【解决方案11】：

您复制下面的样式表代码并将其粘贴到 site.master 页面中，它运行完美，还删除了您的菜单样式代码..

<style type="text/css">
    div.hideSkiplink
    {
        background-color: #3a4f63;
        width: 100%;
    }
    div.menu ul li ul
    {
        display: none;
    }
    div.menu ul
    {
        float: left;
        list-style: none;
    }
    div.menu li
    {
        list-style: none;
        float:inherit;
    }
    div.menu
    {
        padding: 2px 0px 2px 0px;
    }
    div.menu ul
    {
        margin: 0px;
        padding: 0px;
        width: auto;
    }

    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #465c71;
        border: 1px #4e667d solid;
        color: #dde4ec;
        display: block;
        line-height: 1.35em;
        padding: 4px 20px;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
    }

    div.menu ul li a:hover
    {
        background-color: #bfcbd6;
        color: #465c71;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: #465c71;
        color: #cfdbe6;
        text-decoration: none;
    }
</style>

【讨论】：

【解决方案12】：

我尝试了上面的想法（有变体）并修复了一些奇怪的渲染（闪烁），但它们都导致了回归（示例子菜单会渲染得太远，当你移动到它们时会飞走）。

受到另一个线程上的一个想法的启发，我尝试了一些不同的方法：最初隐藏菜单并在页面加载后取消隐藏。

一步一步：我有一个我已经拥有的不可见类 invButton 并用于隐藏按钮等。

<style type="text/css">
.invButton {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none;
    border-style: none;
    border-width: 0;
}
</style>

接下来我将攻击性闪烁菜单的 CssClass 设置为 CssClass="invButton"，所以它开始时是不可见的。

<asp:Menu runat="server" ID="Menu1" ... CssClass="invButton" ... RenderingMode="List" />

最后，一旦页面点击“$(document).ready”，我就会删除该类。

<script type="text/javascript">
$(document).ready(function () {
  $('#ctl00_Menu1').removeClass('invButton');
});
</script>

瞧，菜单以正确的格式很好地呈现，并且在加载时没有奇怪的闪烁。

【讨论】：