asp：在.net 2.0上运行的菜单显示为IE中的表格，而不是chrome或其他版本

Question

My question is related or an extension of Issue of ASP controls displayed in table form on browser html page

I have a similar problem but on different browsers. My application is targeted to asp.net 2.0. The master page has a menu <asp:Menu ..> </asp:Menu> . It is rendered as tables in Internet Explorer and is looking as expected. However it is not working on Chrome or other browsers. It is rendered as <span> <a>..</a></span> . Can you please help me resolve this.

ASP Code

 <form id="pageForm" runat="server"> <asp:ScriptManager ID="mainScriptManager" runat="server" AsyncPostBackTimeout="120"> </asp:ScriptManager> <div class="fillParent"> <div id="menuBar"> <span class="menuBarImage"> <asp:Image ID="logoImage" ImageAlign="Left" SkinID="logoImage" ImageUrl="Images/OT_logo-managerView.png" runat="server" meta:resourcekey="logoImageResource1" /> </span> <span style="display: block; float: left"> <asp:Menu ID="sectionMenu" runat="server" CssClass="menuBarMenu" MaximumDynamicDisplayLevels="1" StaticPopOutImageUrl="Images/arrow-white.png" Orientation="Horizontal" OnDataBound="OnSectionMenuDataBound" DataSourceID="sectionSiteMap" SkipLinkText="" meta:resourcekey="sectionMenuResource1"> <StaticMenuItemStyle CssClass="menuBarStaticLink" /> <StaticHoverStyle CssClass="menuBarStaticHoverLink" /> <DynamicMenuStyle CssClass="menuBarDynamic" /> <DynamicMenuItemStyle CssClass="menuBarLink" /> <DynamicHoverStyle CssClass="menuBarHoverLink" /> </asp:Menu> <asp:SiteMapDataSource ID="sectionSiteMap" runat="server" ShowStartingNode="False" /> </span><span class="menuBarLeftRegion"> <asp:HyperLink ID="helpLink" runat="server" CssClass="menuBarHelpLink" Target="_blank" Text="Help" meta:resourcekey="helpLinkResource1"></asp:HyperLink> </span> </div> 

HTML Rendered source on IE 11

 <DIV id=menuBar> <SPAN class=menuBarImage><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" id=ctl00_logoImage align=left src="Images/OT_logo-Portal.png"> </SPAN> <SPAN style="DISPLAY: block; FLOAT: left"> <TABLE id=ctl00_sectionMenu class="menuBarMenu ctl00_sectionMenu_2" border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD id=ctl00_sectionMenun0 onmouseover=Menu_HoverStatic(this) title="Manage Engine and databases" onkeyup=Menu_Key(this) onmouseout=Menu_Unhover(this)> <TABLE class="menuBarStaticLink ctl00_sectionMenu_4" border=0 cellSpacing=0 cellPadding=0 width="100%" hoverClass="ctl00_sectionMenu_9 menuBarStaticHoverLink"> <TBODY> <TR> <TD style="WHITE-SPACE: nowrap"><A style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; FONT-SIZE: 1em" class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="/PortalAdmin/Admin.aspx" hoverHyperLinkClass="ctl00_sectionMenu_8 menuBarStaticHoverLink">Management</A></TD> <TD style="WIDTH: 0px"><IMG style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle" alt="Expand Management" src="Images/arrow-white.png"></TD></TR></TBODY></TABLE></TD> <TD id=ctl00_sectionMenun1 onmouseover=Menu_HoverStatic(this) title="Configure data to be gathered" onkeyup=Menu_Key(this) onmouseout=Menu_Unhover(this)> <TABLE class="menuBarStaticLink ctl00_sectionMenu_4" border=0 cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR> <TD style="WHITE-SPACE: nowrap"><A style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; FONT-SIZE: 1em" class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="/PortalAdmin/DefinitionSection.aspx">Data Model</A></TD> <TD style="WIDTH: 0px"><IMG style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle" alt="Expand Data Model" src="Images/arrow-white.png"></TD></TR></TBODY></TABLE></TD> <TD id=ctl00_sectionMenun2 onmouseover=Menu_HoverStatic(this) title="Define Alerter" onkeyup=Menu_Key(this) onmouseout=Menu_Unhover(this)> <TABLE class="menuBarStaticLink ctl00_sectionMenu_4" border=0 cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR> <TD style="WHITE-SPACE: nowrap"><A style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; FONT-SIZE: 1em" class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="/PortalAdmin/AleterSection.aspx">KPIs &amp; Actions</A></TD> <TD style="WIDTH: 0px"><IMG style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle" alt="Expand Alerter &amp;amp; Actions" src="Images/arrow-white.png"></TD></TR></TBODY></TABLE></TD> <TD id=ctl00_sectionMenun3 onmouseover=Menu_HoverStatic(this) title="Manage events" onkeyup=Menu_Key(this) onmouseout=Menu_Unhover(this)> <TABLE class="menuBarStaticLink ctl00_sectionMenu_4" border=0 cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR> <TD style="WHITE-SPACE: nowrap"><A style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; FONT-SIZE: 1em" class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="/PortalAdmin/EventSection.aspx">Events</A></TD> <TD style="WIDTH: 0px"><IMG style="BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle" alt="Expand Events" src="Images/arrow-white.png"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <DIV style="CLIP: rect(auto auto auto auto); Z-INDEX: 1; DISPLAY: none; HEIGHT: 156px; VISIBILITY: hidden; TOP: 64px; LEFT: 389px" id=ctl00_sectionMenun0Items class="ctl00_sectionMenu_0 menuBarDynamic ctl00_sectionMenu_7" rel="ctl00_sectionMenun0" x="0" y="0" pos="bottom" offset="0" physicalHeight="158" physicalWidth="225" clippedHeight="158" originY="64"> <TABLE style="TOP: 0px" border=0 cellSpacing=0 cellPadding=0> 

HTML Rendered source code in Chrome

 <div class="fillParent"> <div id="menuBar"> <span class="menuBarImage"> <img id="ctl00_logoImage" src="Images/OT_logo-admin.png" align="left" style="border-width:0px;"> </span> <span style="display: block; float: left"> <div id="ctl00_sectionMenu"> <span title="Manage Engine and databases" class="menuBarStaticLink ctl00_sectionMenu_4"><a class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="javascript:__doPostBack('ctl00$sectionMenu','oManagement')" style="border-style:none;font-size:1em;">Management<img src="Images/arrow-white.png" alt="Expand Management" align="absmiddle" style="border-width:0px;"></a></span> <span title="Configure data to be gathered" class="menuBarStaticLink ctl00_sectionMenu_4"><a class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="javascript:__doPostBack('ctl00$sectionMenu','oData Model')" style="border-style:none;font-size:1em;">Data Model<img src="Images/arrow-white.png" alt="Expand Data Model" align="absmiddle" style="border-width:0px;"></a> </span> <span title="Define Alerter, named sets and actions for analyzing data" class="menuBarStaticLink ctl00_sectionMenu_4"><a class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="javascript:__doPostBack('ctl00$sectionMenu','oAlerter &amp;amp; Actions')" style="border-style:none;font-size:1em;">Alerter &amp; Actions<img src="Images/arrow-white.png" alt="Expand Alerter &amp;amp; Actions" align="absmiddle" style="border-width:0px;"></a></span> <span title="Manage events" class="menuBarStaticLink ctl00_sectionMenu_4"><a class="ctl00_sectionMenu_1 menuBarStaticLink ctl00_sectionMenu_3" href="javascript:__doPostBack('ctl00$sectionMenu','oEvents')" style="border-style:none;font-size:1em;">Events<img src="Images/arrow-white.png" alt="Expand Events" align="absmiddle" style="border-width:0px;"></a> </span> </div> </span><span class="menuBarLeftRegion"> <a id="ctl00_helpLink" class="menuBarHelpLink" href="Help/Default_CSH.htm#Administration/screen_Controls_and_Monitoring.htm" target="_blank">Help</a> </span> </div> <span id="ctl00_messageUpdateTimer" style="visibility:hidden;display:none;"></span> <span id="ctl00_messageUpdatePanel"> </span> <div id="sectionHeader"> <!-- <span id="ctl00_sectionHeaderLabel" class="sectionHeaderText">Administration</span> --> </div> 

Answer 1

If you were at .NET 4.0, you could just switch the rendering mode on the menu control itself.

But you are not, you are on .NET 2.0 where the rendering mode setting is not yet available.

What you could do however is to put this snippet in your global application class (the global.asax) begin request event:

// global.asax.cs
void Application_OnBeginRequest( object sender, EventArgs e )
{
    HttpApplication app = ( HttpApplication )sender;
    HttpContext ctx = app.Context;

    // fixes menu rendering issue for chrome under .net 2.0
    if (
         ctx.Request != null &&
        !string.IsNullOrEmpty( ctx.Request.UserAgent ) &&
         ctx.Request.UserAgent.Contains( "AppleWebKit" )
        )
        ctx.Request.Browser.Adapters.Clear();
}

The problem is that the ASP.NET runtime uses some additional rendering adapters which you just have to remove.