65.9K
CodeProject 正在变化。 阅读更多。
Home

渲染 Asp Menu 控件的动态项

ASP.NET 社区
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2013 年 10 月 11 日

CPOL

3分钟阅读

viewsIcon

22350

Asp Menu 控件在 Internet Explorer 8 中无法呈现其动态可见性设置的项。微软也已在微软官方确认

Asp Menu 控件在 Internet Explorer 8 中无法呈现其动态可见性设置的项。微软已在微软支持中确认，此特定问题存在于其部分产品[1]。经过系统测试，微软发现 IE 并非问题所在，但 asp menu 控件确实存在问题 [2]。 出现此问题的原因是 asp menu 控件错误地假设了其动态项的 CSS 属性 z-index 的值。该控件在其他浏览器（如 IE-7、IE-6、Firefox 等）中按预期运行。

此问题有一些解决方法；

 

解决 Asp Menu 控件问题的微软 Hotfix

IE-8 发布后不久，报告了此错误，微软发布了 Hotfix 来解决此问题。此 Hotfix 适用于 Windows XP 和 Windows Vista。

此 Hotfix 的知识库可以在这里找到；

http://support.microsoft.com/kb/962351

http://support.microsoft.com/?id=981201

Hotfix 本身可以从以下位置下载；

http://code.msdn.microsoft.com/KB962351/Release/ProjectReleases.aspx?ReleaseId=2294

http://code.msdn.microsoft.com/KB967535/Release/ProjectReleases.aspx?ReleaseId=2328

 

尽管此 Hotfix 适用于基于 Framework 2.0 构建的应用程序。对于后来的 Framework，知识库 (KB981201) 建议联系微软支持部门以获取此 HotFix。

覆盖动态项的 z-index 属性

由于问题是由于错误的 z-index 假设，我们可以将动态项的 z-index 设置为高于所有控件 z-index 的最大值。 这解决了 asp menu 控件的问题，并使用了给定的 z-index 值。

要实现此解决方案，请在 CSS 文件中为 asp menu 动态项的 z-index 添加一个 CSS 类

.DynamicItemZIndex
{
      z-index:1000;
}

在皮肤文件中，将此 CSS 类用作 asp menu 控件的 DynamicMenuStyle-CssClass

<asp:Menu 

<%-- some other properties --%>

      DynamicMenuStyle-CssClass="DynamicItemZIndex"

<%-- some other properties --%>

 > 
</asp:Menu>

这种解决方法非常好，因为我们不需要在任何浏览器或控件级别的功能上妥协。 此外，使用此技术不会包含任何外部资源。

 

在 IE-8 中模拟 IE-7

IE-6 和 IE-7 不会干扰 asp menu 控件呈现其动态项。 因此，另一种解决方案是添加一个 Meta 标记来在 IE-8 中模拟 IE-7。 这也解决了问题。

要实现此解决方案，请在页面级别添加一个 Meta 标记以模拟 IE-7

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <%--Emulating IE-7--%>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu1" runat="server" >
            <%-- some properties --%>
        </asp:Menu>
    </div>
    </form>
</body>
</html>

此 Meta 标记也可以在 web.config 文件中的应用程序级别添加

<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=EmulateIE7" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

使用 CSS 友好控件适配器

CSS 友好适配器已根据 HTML 和 XHTML 标准进行设置。 这些适配器会根据标准呈现许多 asp 控件（菜单、TreeView、DetailsView 等），从而减少控件呈现和浏览器兼容性问题。

要实现此解决方案 [3]

  • 从 codeplex 下载 CSS 友好适配器程序集和浏览器文件，网址为 http://cssfriendly.codeplex.com/
  • 在您的项目中添加对该程序集的引用。
  • 添加 App_Browsers 文件夹并将适配器的浏览器文件放在其中。

通过这种方式，CSS 适配器将以正确的方式呈现控件。 当您希望根据标准构建站点并希望使其符合新浏览器的标准时，CSS 友好适配器很好，但使用这些适配器也会降低性能，尤其是在页面的呈现阶段。

另一个值得注意的要点是，当前 CSS 友好适配器只能与 ASP.NET 2.0 一起使用。 尽管如此，新版本仍在开发过程中。

 

其他浏览器的解决方案

IE-8 现在已成为最高标准兼容浏览器 (100%)。 但其他浏览器仍在运行不兼容的版本。 Firefox 3 为 90%，而 Opera 9 为 85% 的标准兼容[4]。 Chrome 和 Safari 的比例也不完美。

Asp menu 控件在这些浏览器中的某些浏览器中也存在问题，例如 Safari。

可以通过清除控件适配器（在 Page_Load 事件中）或将页面呈现为之前的浏览器（在 Page_PreInit 事件中）来实现 Chrome 和 Safari 等浏览器中此问题的解决方案

protected void Page_Load(object sender, EventArgs e)
 {
   if (Request.UserAgent.Contains("AppleWebKit"))
    {
       Request.Browser.Adapters.Clear();
    }
 }

protected void Page_PreInit(object sender, EventArgs e)
 {
   if (Request.UserAgent.Contains("Safari"))
    {
       Page.ClientTarget = "uplevel";
    }
 }
© . All rights reserved.