asp.net菜单控件在safari中无法正确呈现

Question

我正在使用的网站是使用Databound asp:Menu控件.当发送1个菜单项时,它会在Firefox(和IE)中呈现完全正确的HTML,但实际上在Safari和Chrome中搞砸了代码.下面是发送到每个浏览器的代码.我已经测试了几个浏览器,它们都是非常类似的渲染,所以我只在渲染源上发布了两个变体.

我的问题是:如何让ASP.NET向Chrome和Safari发送与Firefox和IE相同的html和javascript？

<!-- This is how the menu control is defined -->
<asp:Menu ID="menu" runat="server" BackColor="#cccccc"
    DynamicHorizontalOffset="2" Font-Names="Verdana" StaticSubMenuIndent="10px" StaticDisplayLevels="1"
    CssClass="left_menuTxt1" Font-Bold="true" ForeColor="#0066CC">
    <DataBindings>
        <asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text"
            ToolTipField="ToolTip" />
    </DataBindings>
    <StaticSelectedStyle BackColor="#0066CC" HorizontalPadding="5px" VerticalPadding="2px"
        Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" />
    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" />
    <DynamicMenuStyle BackColor="#fbfbfb" BorderColor="#989595" BorderStyle="Inset" BorderWidth="1"
        Width="80px" VerticalPadding="1" />
    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" Font-Name="Verdama"
        ForeColor="#c6c4c4" CssClass="left_menuTxt1" Font-Bold="true" />
    <DynamicSelectedStyle BackColor="#cccccc" HorizontalPadding="5px" VerticalPadding="2px"
        Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" />
</asp:Menu>
<!-- From Safari View Page Source (Chrome source very similar) -->
<span title="Order" class="ctl00_leftNav_menu_4">
<a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
  href="javascript:__doPostBack('ctl00$leftNav$menu','oMy Order')">
My Order
<img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;t=633590571537099818" 
alt="Expand My Order" 
align="absmiddle" 
style="border-width:0px;" /></a></span><br />


<!-- From Firefox View Page Source (IE View page similar) -->
<table>
<tr onmouseover="Menu_HoverStatic(this)" 
    onmouseout="Menu_Unhover(this)" 
    onkeyup="Menu_Key(event)" 
    title="Order" 
    id="ctl00_leftNav_menun0">
  <td>
    <table class="ctl00_leftNav_menu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
       <td style="white-space:nowrap;width:100%;">
          <a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
             href="../Order/OrderList.aspx">
My Order
          </a>
       </td>
       <td style="width:0;">
           <img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;t=633590571537099818" 
                alt="Expand My Order" style="border-style:none;vertical-align:middle;" />
       </td>
     </tr>
  </table>
 </td>
</tr>
</table>

更新:我的解决方案帖子是正确的..但我无法将自己标记为正确...所以如果有人想要复制它,那么我可以关闭它.:)

Answer 1

我从weblogs.asp.net的评论中找到了这个解决方案.它可能是一个黑客,但它确实有效.

这种跨浏览器兼容性的斗争正在变得令人沮丧.

 if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
    {

        Request.Browser.Adapters.Clear();

    }

如果有人有一个更好的解决方案,而不是一个黑客,我会很高兴你发布它.从我广泛的网络搜索,看起来我并不是唯一一个菜单控件的问题,所以一些好的参考将帮助其他人在相同的情况下.

Answer 2

我遇到了asp:menu控件和webkit的问题.而且很难按照我想要的方式设计风格.我的建议是使用CSS友好控制适配器:

• http://www.asp.net/cssadapters/
• http://www.asp.net/CSSAdapters/Menu.aspx

这将菜单表转换为更现代和SEO友好的标记.您的菜单看起来更像是这样的:

<ul class="AspNet-Menu">
  <li class="Leaf Selected">
    <a href="Orders.aspx" class="Link Selected">Orders</a></li>
  <li class="ALeaf">
    <a href="MyOrders.aspx" class="Link">My Orders</a></li>
</ul>

在我的测试中,标记在所有浏览器中都是相同的.

Answer 3

如果您有多个网络应用,这是解决chrome和safari问题的最简单方法:

在"%SystemRoot%\ Microsoft.NET\Framework [version]\CONFIG\Browsers"中创建一个名为safari.browser的文件,其中包含以下内容:

<browsers>
    <browser refID="Safari1Plus">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.Menu"
                     adapterType="" />
        </controlAdapters>
    </browser>
</browsers>

这将告诉asp.net在渲染safari的菜单控件时不要使用适配器.Safari1Plus定义在同一目录中的mozilla.browser文件的末尾.这也适用于chrome,因为它们都使用webkit,这就是asp.net识别Safari1Plus的方式.

接下来运行%SystemRoot%\ Microsoft.NET\Framework [version]\aspnet_regbrowsers -i

这会将所有浏览器文件编译成程序集并将其添加到GAC.

现在asp.net菜单将在safari和chrome中正确呈现.

或者,您可以在每个Web应用程序中添加App_Browsers目录的文件.

Answer 4

我只是想提交一个替代选项.这适用于ASP.NET 3.5.

• 将"App_Browsers"ASP.NET文件夹添加到项目中
• 在此文件夹中创建一个浏览器文件

• 在浏览器文件中,在<browsers>标记之间添加以下代码:

  <browser id="Chrome" parentID="Safari1Plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>

这应该在Chrome/Safari中正确呈现菜单控件.