今天有客户反馈说他网站的ASP.NET Menu在Google Chrome 下竟不能正常显示，我简单试了一下，果然有问题！
问题：
1. CSS没有正常应用
2. 鼠标点击事件有误
3. 下拉子目录不能显示
虽然说Google Chrome 还在测试，但市场占有率也绝非一般杂牌浏览器能够相比的，与ASP.NET有这样的兼容性问题也确实不容小觑，希望有应用了menu控件的兄弟们做好心理准备.
试验代码如下（在IE各版本和Firefox3.0下均正常，截图在页面底部）：
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#666666" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#1C5E55" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#666666" ForeColor="White" />
<DynamicMenuStyle BackColor="#E3EAEB" />
<DynamicSelectedStyle BackColor="#1C5E55" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#666666" ForeColor="White" />
<Items>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item">
<asp:MenuItem Text="New Item" Value="New Item">
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
页面rendered后的代码：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title><style type="text/css">
.Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.Menu1_1 { color:#666666;font-family:Verdana;font-size:0.8em;text-decoration:none; }
.Menu1_2 { color:#666666;background-color:#E3EAEB;font-family:Verdana;font-size:0.8em; }
.Menu1_3 { }
.Menu1_4 { padding:2px 5px 2px 5px; }
.Menu1_5 { }
.Menu1_6 { padding:2px 5px 2px 5px; }
.Menu1_7 { background-color:#E3EAEB; }
.Menu1_8 { }
.Menu1_9 { background-color:#1C5E55; }
.Menu1_10 { }
.Menu1_11 { background-color:#1C5E55; }
.Menu1_12 { color:White; }
.Menu1_13 { color:White;background-color:#666666; }
.Menu1_14 { color:White; }
.Menu1_15 { color:White;background-color:#666666; }
</style></head>
<body>
<form name="form1" method="post" action="Default5.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTk1NjU1MTE4ZGRhA4lcAEca3A8JotFLYihmbaU2Ow==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebSite31/WebResource.axd?d=HwUWUJd6kJ8QUnfFE8pt3g2&t=633516562656148468" type="text/javascript"></script>
<script src="/WebSite31/WebResource.axd?d=aqK9JaxrUb0G1Kukw8-oYA2&t=633516562656148468" type="text/javascript"></script>
<div>
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebSite31/WebResource.axd?d=ZyhcOmIzYIFzyY1X_SjU9w2&t=633516562656148468" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td><td style="width:0;"><img src="/WebSite31/WebResource.axd?d=oM8OnfteDtlcRq9YRB7uXauc-4k-u3hku4Ba6xoPoE01&t=633516562656148468" alt="Expand New Item" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n5">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n6">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n7">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td>
</tr>
</table></td>
</tr>
</table><div id="Menu1n2Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n8">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','New Item\\New Item')">New Item</a></td><td style="width:0;"><img src="/WebSite31/WebResource.axd?d=oM8OnfteDtlcRq9YRB7uXauc-4k-u3hku4Ba6xoPoE01&t=633516562656148468" alt="Expand New Item" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n9">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','New Item\\New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n10">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','New Item\\New Item')">New Item</a></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n2ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/WebSite31/WebResource.axd?d=hWD4WkPF9_fYH8W_RqOk-RXYB4Lw2aiUjcnNmls5htE1&t=633516562656148468" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n2ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/WebSite31/WebResource.axd?d=pMhXA7AMNmyIGez40gO6QBAPHOXOdaeC9F_k7zr6_fc1&t=633516562656148468" alt="Scroll down" />
</div>
</div><div id="Menu1n8Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n11">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','New Item\\New Item\\New Item')">New Item</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n12">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','New Item\\New Item\\New Item')">New Item</a></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n8ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/WebSite31/WebResource.axd?d=hWD4WkPF9_fYH8W_RqOk-RXYB4Lw2aiUjcnNmls5htE1&t=633516562656148468" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n8ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/WebSite31/WebResource.axd?d=pMhXA7AMNmyIGez40gO6QBAPHOXOdaeC9F_k7zr6_fc1&t=633516562656148468" alt="Scroll down" />
</div>
</div><a id="Menu1_SkipLink"></a>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDgLqqLz2AgLb4urtDALb4urtDALb4urtDALb4urtDALb4urtDALb4urtDALb4urtDALb4urtDAKEspGXDAKEspGXDAKEspGXDAK/vtDUDQK/vtDUDTYslyzrciqt5QxO8/ApueHaEt2o" />
</div>
<script type="text/javascript">
//<![CDATA[
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 2;
Menu1_Data.verticalOffset = 0;
Menu1_Data.hoverClass = 'Menu1_15';
Menu1_Data.hoverHyperLinkClass = 'Menu1_14';
Menu1_Data.staticHoverClass = 'Menu1_13';
Menu1_Data.staticHoverHyperLinkClass = 'Menu1_12';
//]]>
</script>
</form>
</body>
</html>
当然ASP.NET 本身render出来的代码就不好，我会去试一下CSS friendly adapter生成的menu，看是不是还有问题...
==================================
10：54更新
使用了CSS Friendly Control Adapter的情况下，简单的menu和有模板节点的menu在Chrome下一切正常！
render出来的Markup如下：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" href="SimpleMenu.css" type="text/css" /><link href="/Web/WebResource.axd?d=yZFNFFBzVUFMdmPQkET0aVaJdY6bM5eXFPUCNtCN8cuGvP8ds-8mteCJ-iN4XSnl0&t=633564679698685755" type="text/css" rel="stylesheet" /><title>
</title><style type="text/css">
.EntertainmentMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.EntertainmentMenu_1 { text-decoration:none; }
.EntertainmentMenu_2 { }
</style></head>
<body>
<form name="form1" method="post" action="SimpleMenu.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDgzMjk3MTA4ZGQq0UjteW9ZTqdYtuVjC75cwxkDrg==" />
</div>
<script src="/Web/WebResource.axd?d=yZFNFFBzVUFMdmPQkET0aQTySc46BBLH-m1m_vhpQI4zeYc8Al9jFkfB-mYP3Npf7ubE2CZ3WGAcOgo_97r5UA2&t=633564679698685755" type="text/javascript"></script>
<script src="/Web/WebResource.axd?d=yZFNFFBzVUFMdmPQkET0aQTySc46BBLH-m1m_vhpQI4CVoUaQh-K5rw0StosldEX_Y9iIJa3AZ6VOHtmDwcXnQ2&t=633564679698685755" type="text/javascript"></script>
<div class="SimpleEntertainmentMenu" id="EntertainmentMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('EntertainmentMenu','bMusic')" class="AspNet-Menu-Link">
Music</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Classical')" class="AspNet-Menu-Link">
Classical</a>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock')" class="AspNet-Menu-Link">
Rock</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock\\Electric')" class="AspNet-Menu-Link">
Electric</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock\\Acoustical')" class="AspNet-Menu-Link">
Acoustical</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Jazz')" class="AspNet-Menu-Link">
Jazz</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<span class="AspNet-Menu-NonLink">
Movies</span>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMovies\\Action')" class="AspNet-Menu-Link">
Action</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMovies\\Drama')" class="AspNet-Menu-Link">
Drama</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('EntertainmentMenu','bMovies\\Musical')" class="AspNet-Menu-Link">
Musical</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="EntertainmentMessage">
<span id="MessageLabel"></span>
</div>
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCgKC1pvTDgLW9MLnBgL/y7ahBgKmy4WUAQLhzOX9CgKCmo/MAQKDocbRAgLFq8u2AQL7r4+rAgLRvfDKDH5CpCkeKrEoDCIWReoODT89KhB7" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</form>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
