asp.net - サファリでasp.netメニューコントロールが正しくレンダリングされない

Question

私が取り組んでいるサイトは、Databound asp:Menu コントロールを使用しています。1 つのメニュー項目を送信すると、Firefox (および IE) では完全に正しい HTML がレンダリングされますが、Safari と Chrome ではコードがめちゃくちゃになります。以下は、各ブラウザに送信されたコードです。いくつかのブラウザーでテストしましたが、どれもほぼ同じようにレンダリングされたので、レンダリング ソースには 2 つのバリエーションのみを掲載しています。

私の質問は次のとおりです。Firefox や IE と同じように、ASP.NET から同じ html と JavaScript を Chrome と Safari に送信するにはどうすればよいですか?

<!-- 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();

    }

誰かがハックではないより良い解決策を持っている場合は、投稿していただければ幸いです。また、Web を広範囲に検索したところ、メニュー コントロールに関するこの問題は私だけではないようです。そのため、同じ状況にある他の人にとって参考になる情報がいくつかあります。

Answer 2

複数のウェブアプリがある場合、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に指示されます。Safari1Plusは、同じディレクトリのmozilla.browserファイルの最後に定義されています。どちらもasp.netがSafari1Plusを識別する方法であるWebkitを使用しているため、これはChromeでも機能します。

次に、％SystemRoot％\ Microsoft.NET \ Framework [version] \aspnet_regbrowsers-iを実行します

これにより、すべてのブラウザファイルがアセンブリにコンパイルされ、GACに追加されます。

これで、asp.netメニューがサファリとクロームで正しくレンダリングされます。

または、各WebアプリのApp_Browsersディレクトリにファイルを追加することもできます。

Answer 3

別のオプションを提出したかっただけです。これは 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 4

asp:menu コントロールと Webkit にも問題がありました。それに、自分の思い通りにスタイリングするのは難しい。CSS Friendly Control Adapters を使用することをお勧めします。

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

魔法のように機能します！

    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

Answer 6

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 7

Chrome と Safari がメニュー コントロールを適切にレンダリングしない問題は、Chrome と Safari によってレンダリングされるナビゲーション スキップリンク イメージ ボックスが原因です。

スキップリンクの画像にcss を実行するとdisplay: none;、メニュー コントロールが本来の位置に配置されます。

ネストされたメニューではなく、単純な 1 レベルのメニューでこれをテストしました。

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

Answer 8

これは、@Mayank Sharma / @jball C# バージョンを VB.NET に変換したものです。修正してくれてありがとう、何ヶ月も私を悩ませていた。私の問題は、IE8とChromeを除いて、MACとPCのすべてのブラウザが機能することでした。しかし、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

「Safari」ではなく「fake_user_agent」を確認する必要があったことに注意してください。

Answer 9

ClientTarget="uplevel"次のように page ディレクティブに追加すると、Safari が機能します。

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