asp.net菜单控件在safari中无法正确渲染

w1e3prcc  于 2023-10-21  发布在  .NET
关注(0)|答案(9)|浏览(158)

我工作的网站是使用数据仓库asp:菜单控件。当发送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>

更新:我的解决方案是正确的。但我不能把自己的标记为正确的。所以如果有人想复制我就可以结案了:)

mbjcgjjk

mbjcgjjk1#

我从weblogs.asp.net上的一条评论中找到了这个解决方案。这可能是一个黑客,但它确实工作。
这种跨浏览器兼容性的斗争越来越令人不安。

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

        Request.Browser.Adapters.Clear();

    }

如果任何人有一个更好的解决方案,而不是这么多的黑客,我将不胜感激,如果你张贴它。从我广泛的网络搜索,它看起来像我不是唯一的这个问题与菜单控制,所以一些好的参考将帮助别人在同样的情况。

kkih6yb8

kkih6yb82#

我在asp:menu控件和webkit上也遇到了问题。另外,很难完全按照我想要的方式来设计。我的建议是使用CSS友好的控制适配器:

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

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

91zkwejq

91zkwejq3#

如果您有多个Web应用程序,以下是解决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呈现菜单控件时不要使用适配器。Safari 1 Plus定义在同一目录下mozilla.browser文件的末尾。这也适用于Chrome,因为它们都使用webkit,这是asp.net识别Safari 1 Plus的方式。

下次运行%SystemRoot%\Microsoft.NET\Framework[版本]\aspnet_regbrowsers -i

这将把所有浏览器文件编译成一个程序集,并将其添加到GAC中。
现在asp.net菜单将在safari和Chrome中正确呈现。
或者,您可以将该文件添加到每个Web应用程序中的App_Browsers目录中。

ct3nt3jp

ct3nt3jp4#

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

6pp0gazn

6pp0gazn5#

像魔法一样工作!

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
l2osamch

l2osamch6#

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

stszievb7#

下面是转换为VB.NET的@Mayank Sharma / @jball C#版本。谢谢你们的修理工,已经烦了我几个月了。我的问题是,除了IE 8和Chrome,Mac和PC上的每个浏览器都能正常工作。但是Chrome,尽管我很喜欢它,却经常无法运行谷歌浏览器--解决这个问题!!!

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

68bkxrlz

68bkxrlz8#

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/

6vl6ewon

6vl6ewon9#

像这样将ClientTarget="uplevel"添加到页面指令中可以使Safari工作:

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

相关问题