8

我正在处理的网站正在使用 Databound asp:Menu 控件。发送 1 个菜单项时，它呈现的 HTML 在 Firefox（和 IE）中是绝对正确的，但在 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>

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

4

9 回答 9

11

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

这种跨浏览器兼容性的斗争越来越令人不安。

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

        Request.Browser.Adapters.Clear();

    }

如果有人有更好的解决方案而不是黑客，如果您发布它，我将不胜感激。从我广泛的网络搜索来看，菜单控件的这个问题似乎并不孤单，所以一些好的参考可以帮助其他处于相同情况的人。

于 2008-11-10T06:47:35.890 回答
5

我也遇到了 asp:menu 控件和 webkit 的问题。另外，很难完全按照我想要的方式设计。我的建议是使用 CSS Friendly Control Adapters：

这会将菜单的表格转换为更现代且对 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>

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

于 2008-11-10T14:25:52.503 回答
5

如果您有多个网络应用程序，这是为 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 目录中。

于 2009-01-08T21:16:00.830 回答
5

我只是想提交一个替代选项。这适用于 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 中正确呈现菜单控件。

于 2011-02-04T16:47:18.383 回答
2

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);
    }
}
于 2010-06-11T18:33:47.273 回答
2

像魔术一样工作！

    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
于 2011-09-22T08:53:51.880 回答
0

这是转换为 VB.NET 的 @Mayank Sharma / @jball C# 版本。感谢修复家伙，困扰我几个月了。我的问题是 MAC 和 PC 上的每个浏览器都可以正常工作，除了 IE8 和 Chrome。但是 Chrome，尽管我很喜欢它，但经常无法运行 Google Docs - 解决这个问题！！！

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”。

于 2010-06-29T15:16:00.933 回答
0

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

如果您display: none;在图像上为跳过链接执行 css，则菜单控件会按应有的方式定位自身。

我已经在一个简单的 1 级菜单而不是嵌套菜单上对此进行了测试。

http://www.stfu.com/2011/05/05/asp-net-menu-control-positioning-in-safari-google-chrome/

于 2011-05-06T13:59:16.033 回答
-1

像这样添加ClientTarget="uplevel"到页面指令使 Safari 工作：

<%@ Page ClientTarget="uplevel" ... %>
于 2009-05-21T19:06:26.193 回答