我正在使用的网站是使用Databound asp:Menu控件。发送1个菜单项时,它会在Firefox(和IE)中呈现完全正确的HTML,但实际上在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&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&t=633590571537099818"
alt="Expand My Order" style="border-style:none;vertical-align:middle;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
更新:我的解决方案帖子是正确的..但我无法将自己标记为正确...所以如果有人想要复制它,那么我可以关闭它。 :)
答案 0 :(得分:11)
我从weblogs.asp.net的评论中找到了这个解决方案。 它可能是一个黑客,但确实有效。
这种跨浏览器兼容性的斗争正在变得令人沮丧。
if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
Request.Browser.Adapters.Clear();
}
如果有人有一个更好的解决方案,而不是一个黑客,我会很感激,如果你发布它。从我广泛的网络搜索,看起来我并不是唯一一个菜单控件的问题,所以一些好的参考将帮助其他人在相同的情况下。
答案 1 :(得分: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>
在我的测试中,标记在所有浏览器中都是相同的。
答案 2 :(得分: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 [版本] \ aspnet_regbrowsers -i
这会将所有浏览器文件编译成一个程序集并将其添加到GAC。
现在asp.net菜单将在safari和chrome中正确呈现。
或者,您可以在每个Web应用程序中添加App_Browsers目录。
答案 3 :(得分:5)
我只想提交备用选项。这适用于ASP.NET 3.5。
在浏览器文件中,在<browsers>
标记之间添加以下代码:
<browser id="Chrome" parentID="Safari1Plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>
这应该在Chrome / Safari中正确呈现菜单控件。
答案 4 :(得分: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);
}
}
答案 5 :(得分: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
答案 6 :(得分:0)
这是@Mayank Sharma / @jball C#版本转换为VB.NET。感谢修复人员,几个月来一直困扰着我。我的问题是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”。
答案 7 :(得分:0)
Chrome和Safari无法正确呈现菜单控件的问题是由Chrome和Safari呈现导航跳过链接图像框。
如果您在跳过链接的图像上执行了display: none;
,那么菜单控件就会按照自己的意愿定位。
我在简单的1级菜单上测试了这个,而不是嵌套菜单。
http://www.s-t-f-u.com/2011/05/05/asp-net-menu-control-positioning-in-safari-google-chrome/
答案 8 :(得分:-1)
将ClientTarget="uplevel"
添加到页面指令中会使Safari工作:
<%@ Page ClientTarget="uplevel" ... %>