我工作的网站是使用数据仓库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&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>
更新:我的解决方案是正确的。但我不能把自己的标记为正确的。所以如果有人想复制我就可以结案了:)
9条答案
按热度按时间mbjcgjjk1#
我从weblogs.asp.net上的一条评论中找到了这个解决方案。这可能是一个黑客,但它确实工作。
这种跨浏览器兼容性的斗争越来越令人不安。
如果任何人有一个更好的解决方案,而不是这么多的黑客,我将不胜感激,如果你张贴它。从我广泛的网络搜索,它看起来像我不是唯一的这个问题与菜单控制,所以一些好的参考将帮助别人在同样的情况。
kkih6yb82#
我在asp:menu控件和webkit上也遇到了问题。另外,很难完全按照我想要的方式来设计。我的建议是使用CSS友好的控制适配器:
这将菜单的表格转换为更现代和SEO友好的标记。你的菜单看起来更像这样:
在我的测试中,标记在所有浏览器中都是相同的。
91zkwejq3#
如果您有多个Web应用程序,以下是解决Chrome和Safari的此问题的最简单方法:
在“%SystemRoot%\Microsoft.NET\Framework[version]\CONFIG\Browsers”中创建一个名为safari.browser的文件,其中包含以下内容:
这将告诉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目录中。
ct3nt3jp4#
我只是想提出一个替代方案。这适用于ASP.NET 3.5。
<browsers>
标记之间添加以下代码:<browser id="Chrome" parentID="Safari1Plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>
这应该可以在Chrome/Safari中正确呈现菜单控件。
6pp0gazn5#
像魔法一样工作!
l2osamch6#
Mayank Sharma找到了一个解决方案,可以处理母版页,而不是编辑单个页面。所有使用母版页的页面都是无缝修复的。这仍然是一个黑客,但你做你必须做的。这里有一个基本的例子母版页代码背后。
stszievb7#
下面是转换为VB.NET的@Mayank Sharma / @jball C#版本。谢谢你们的修理工,已经烦了我几个月了。我的问题是,除了IE 8和Chrome,Mac和PC上的每个浏览器都能正常工作。但是Chrome,尽管我很喜欢它,却经常无法运行谷歌浏览器--解决这个问题!!!
你会注意到,我必须检查“fake_user_agent”,而不是“Safari”。
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/
6vl6ewon9#
像这样将
ClientTarget="uplevel"
添加到页面指令中可以使Safari工作: