asp.net菜单控件在Safari中无法正确显示

Question

我正在使用的网站使用Databound asp：Menu控件。当发送1个菜单项时，它呈现的HTML在Firefox（和IE）中绝对正确，但是在Safari和Chrome中确实搞糟了代码。以下是发送给每个浏览器的代码。我已经测试了几个浏览器，并且它们都非常类似地渲染，所以我只在渲染源上发布了两个变体。

我的问题是：我如何让ASP.NET发送相同的HTML和JavaScript到Chrome和Safari，因为它对Firefox和IE呢？

<!-- 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：菜单控件和webkit也有问题。另外，很难完全按照我想要的方式进行设计。我的建议是使用CSS友好控制适配器：

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

本菜单的表格转换成更加现代和搜索引擎友好的标记。你的菜单看起来更像这样：

<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

这里的，如果你有多个Web应用程序来解决这个问题是Chrome和Safari浏览器的最简单的方法：

创建一个名为safari.browser中的“％SystemRoot％\ Microsoft.NET \框架[版本]文件\ CONFIG \浏览器”包含以下内容：

<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 \框架[版本] \ aspnet_regbrowsers -i

这将编译所有的浏览器文件为一个程序集，并将其添加到GAC。

现在asp.net菜单将在safari和chrome中正确渲染。

或者，您可以将文件添加到每个Web应用程序的App_Browsers目录中。

Answer 4

添加ClientTarget="uplevel"到页指令，像这样让野生动物园的工作：

<%@ Page ClientTarget="uplevel" ... %> 

Answer 5

Mayank Sharma发现，母版页的作品，而不是编辑单个页面的解决方案。所有使用母版页的页面都可以无缝修复。这仍然是一个黑客攻击，但你做你必须做的。这里有一个准系统示例母版页代码。

using System; 
using System.Web.UI; 

/// <summary> 
/// Summary description for ExampleMasterPage 
/// </summary> 
public class ExampleMasterPage : MasterPage 
{  
    public ExampleMasterPage() { } 

    protected override void AddedControl(Control control, int index) 
    { 
     if (Request.ServerVariables["http_user_agent"] 
      .IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1) 
     { 
      this.Page.ClientTarget = "uplevel"; 
     } 
     base.AddedControl(control, index); 
    } 
} 

Answer 6

这里是@Mayank Sharma/@jball C＃版本转换为VB.NET。感谢修复的人，几个月来一直困扰着我。我的问题是MAC和PC上的每个浏览器都工作，除了IE8和Chrome。不过，就像我喜欢它一样，Chrome往往无法运行Google文档 - 解决这个问题！

Protected Overrides Sub AddedControl(ByVal control As Control, ByVal index As Integer) 
    If Request.ServerVariables("http_user_agent").IndexOf("fake_user_agent", StringComparison.CurrentCultureIgnoreCase) <> -1 Then 
     Me.Page.ClientTarget = "uplevel" 
    End If 
    MyBase.AddedControl(control, index) 
    End Sub 

你会注意到我必须检查“fake_user_agent”而不是“Safari”。

Answer 7

我只是想提交一个替代选项。这适用于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浏览器的菜单控制。

Answer 8

Chrome和Safari无法正确呈现菜单控件的问题是由于导航跳过链接图像框由Chrome和Safari呈现。

如果您对跳过链接的图像执行css display: none;，那么菜单控件就像它应该定位一样。

我已经在一个简单的1级菜单上测试了这个，而不是嵌套菜单。

http://www.s-t-f-u.com/2011/05/05/asp-net-menu-control-positioning-in-safari-google-chrome/

Answer 9

像魔术一样工作！

If Request.ServerVariables("http_user_agent").IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) <> -1 Or Request.UserAgent.Contains("AppleWebKit") Then 
     Request.Browser.Adapters.Clear() 
     Page.ClientTarget = "uplevel" 
    End If