1. 技术文章
  2. asp.net menu control not rending correctly in safari

asp.net menu control not rending correctly in safari

由 纵然是瞬间 提交于 2019-11-30 09:20:56

I found this solution from a comment on weblogs.asp.net. It might be a hack, but it does work.

This cross browser compatibility struggle is getting upsetting. 

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

        Request.Browser.Adapters.Clear();

    }

If anyone has a better solution that's not so much a hack, I would be grateful if you posted it. And from my extensive web searches, it looks like I'm not alone with this problem with the menu control, so some good references would help out others in the same situation.

I've had problems with the asp:menu control and webkit as well. Plus it's hard to style exactly the way I want. My recommendation is to use the CSS Friendly Control Adapters:

This converts the menu's table into much more modern and SEO-friendly markup. Your menu will look more like this:

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

In my testing, the markup is the same in all browsers.

Here's the easiest way to fix this issue for both chrome and safari if you have multiple web apps:

Create a file named safari.browser in "%SystemRoot%\Microsoft.NET\Framework[version]\CONFIG\Browsers" that contains the following:

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

This will tell asp.net not to use an adapter when rendering the menu control for safari. Safari1Plus is defined at the end of the mozilla.browser file in the same directory. This works for chrome as well because they both use webkit which is how asp.net identifies Safari1Plus.

Next run %SystemRoot%\Microsoft.NET\Framework[version]\aspnet_regbrowsers -i

this will compile all the browser files into an assembly and add it to the GAC.

now the asp.net menu will render correctly in safari and chrome.

Alternatively you can add the file the the App_Browsers directory in each of your web apps.

I just wanted to submit an alternate option. This works for ASP.NET 3.5.

  • Add the "App_Browsers" ASP.NET folder to your project
  • Create a Browser file within this folder

  • In the browser file, add the following code between the <browsers> tag:

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

That should properly render the menu control in Chrome/Safari.

Mayank Sharma found a solution that works with master pages, rather than editing individual pages. All pages that use the master page are fixed seamlessly. It's still a hack, but you do what you have to. Here's a barebones example master page code behind.

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);
    }
}
colin

Works like magic!

    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

Here's the @Mayank Sharma / @jball C# version converted to VB.NET. Thanks for the fix guys, been bugging me for months. My problem was every browser on MAC and PC worked except IE8 and Chrome. But then Chrome, much as I like it, often fails to run Google Docs - work that out!!!

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

You'll note that I had to check for "fake_user_agent", not "Safari".

albert

The issue with Chrome and Safari not rendering the menu control properly is due to the navigation skiplink image box being rendered by Chrome and Safari.

If you do a css display: none; on the image for the skiplink then the menu control positions itself like it should.

I've tested this on a simple 1 level menu and not nested menus.

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

Adding ClientTarget="uplevel" to the page directive like so makes Safari work:

<%@ Page ClientTarget="uplevel" ... %>
标签
ASP.NET
aspmenu
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!