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