asp：菜单无法正常渲染

时间：2012-12-29 22:21:44

标签： asp.net apache menu mono

我正在尝试在ASP.NET中部署使用VS2010开发的简单Web应用程序 在开发机器上本地IIS上的一切都很顺利，但是我在Apache服务器上部署了一个问题：菜单没有正确呈现，似乎没有考虑到CSS。

有没有人有这样的问题？ 谢谢你的帮助！

[编辑] Appache 2.2.22版 单声道版本2.10.8.1

Site.Master：

<body>
<form runat="server">
    <div class="page">
        <div class="TopBlank"> </div>
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>            
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem Text="Google Maps">
                        <asp:MenuItem Text="HTML" Value="HTML" NavigateUrl="~/Map.htm"></asp:MenuItem>
                        <asp:MenuItem Text="ASPX" Value="ASPX" NavigateUrl="~/Map.aspx"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/Liens.aspx" Text="Liens utiles"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
        </div>
    </div>
</form>
</body>

CSS：

.menu
{
    padding: 4px 0px 4px 8px;
}

.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

.menu ul li a, .menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

.menu ul ul
{
    margin-left: 10%;
}

我发现的问题是，在IIS上运行时，asp：菜单会转换为HTML div，而使用mono时，它会转换为HTML表格。似乎在单声道上运行时，找不到CSS类，如源代码所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>

</title><link rel="stylesheet" type="text/css" href="Styles/Site.css" />
<style type="text/css">

.ctl00_NavigationMenu_0 {background-color:White;}
.ctl00_NavigationMenu_1 {border-style:None;text-decoration:none;}
.ctl00_NavigationMenu_2 {}
</style></head>
<body>
    <form name="aspnetForm" method="post" action="Arduino.aspx" id="aspnetForm">
[......]
<div class="clear hideSkiplink">
                <a href="#ctl00_NavigationMenu_SkipLink">
 <img alt="Skip Navigation Links" height="0" width="0" src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_NWdhSxeypCYSJgIFnBFWuKjP9Rs%3d_f&amp;t=634787585370000000" style="border-width:0px;" /></a>
<table cellpadding="0" cellspacing="0" border="0" id="ctl00_NavigationMenu" class="menu ctl00_NavigationMenu_2" IncludeStyleBlock="false">
    <tr>
        <td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','0')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','0')">
<table id="ctl00_NavigationMenu_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="white-space:nowrap;"><a href="Default.aspx" class="ctl00_NavigationMenu_1" id="ctl00_NavigationMenu_0l">Home</a>
</td>
            </tr>
    </table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverItem ('ctl00_NavigationMenu','1',null)" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1')">
<table id="ctl00_NavigationMenu_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td style="white-space:nowrap;"><a href="javascript:__doPostBack('ctl00$NavigationMenu','1')" class="ctl00_NavigationMenu_1" id="ctl00_NavigationMenu_1l">Google Maps</a>
</td><td>
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_sxBDVaG6ao8vAH1kuYRka4pbdXI%3d_f&amp;t=634787585370000000" border="0" alt="Expand Google Maps" />
</td>
        </tr>
    </table> 
    </td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','2')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','2')">
<table id="ctl00_NavigationMenu_2i" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td style="white-space:nowrap;">
<a href="Liens.aspx" class="ctl00_NavigationMenu_1" id="ctl00_NavigationMenu_2l">Liens utiles</a>
</td>
        </tr>
    </table>
    </td>
<td style="width:3px;">
</td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','3')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','3')">
<table id="ctl00_NavigationMenu_3i" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td style="white-space:nowrap;">
<a href="About.aspx" class="ctl00_NavigationMenu_1" id="ctl00_NavigationMenu_3l">About</a>
</td>
        </tr>
    </table>
</td>
</tr>
</table>
<div class="" id="ctl00_NavigationMenu_1s" style="visibility:hidden;position:absolute;z-index:1;left:0px;top:0px;">
<div id="ctl00_NavigationMenu_1cu" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','u')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','u')" style="display:block;text-align:center;">
    <img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BDOep8uzgXhnBosTOAXwCS8Rjzo%3d_f&t=634787585370000000" alt="Scroll up" />
</div>
<div id="ctl00_NavigationMenu_1cb">
    <div id="ctl00_NavigationMenu_1cc">
        <table cellpadding="0" cellspacing="0" border="0">
<tr>
    <td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_0','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_0','1')">
<table id="ctl00_NavigationMenu_1_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td style="width:100%;white-space:nowrap;">
<a href="Map.htm" class="ctl00_NavigationMenu_1" id="ctl00_NavigationMenu_1_0l">HTML</a>
</td>
        </tr>
    </table>
</td>
</tr>
<tr>
    <td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_1','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_1','1')">
<table id="ctl00_NavigationMenu_1_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td style="width:100%;white-space:nowrap;">
<a href="Map.aspx" class="ctl00_NavigationMenu_1" id="ctl00_NavigationMenu_1_1l">ASPX</a></td>
        </tr>
    </table>
</td>
</tr>
</table>
    </div>
</div>
<div id="ctl00_NavigationMenu_1cd" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','d')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','d')" style="display:block;text-align:center;">
    <img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BiLWkNe4ZNGZnI7LWDxYAtinS8U%3d_f&t=634787585370000000" alt="Scroll down" />
    </div>
</div>
<a id="ctl00_NavigationMenu_SkipLink"></a>
            </div>

要与IIS版本进行比较：

<div class="clear hideSkiplink">
            <a href="#NavigationMenu_SkipLink"><img alt="Liens Ignorer la navigation" src="/WebResource.axd?d=vNc13qxX3XhBCykqqeAM4K6DxyzXtiKPMSkmgOEeg_C2LMTfPWT8UVPq_FQ2dO_k8csGANppvDNQ8U1ILvqfCCUzXeU7VT9PTkQGnNHogQU1&amp;t=634679288663570000" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
<ul class="level1">
   <li>
      <a class="level1" href="Default.aspx">Home</a>
   </li>
   <li>
      <a class="popout level1" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;Google Maps&#39;)">Google Maps</a>
         <ul class="level2">
            <li>
               <a class="level2" href="Map.htm">HTML</a>
            </li>
            <li>
               <a class="level2" href="Map.aspx">ASPX</a>
            </li>
         </ul>
   </li>
   <li>
      <a class="level1" href="Liens.aspx">Liens utiles</a>
   </li>
   <li>
   <a class="level1" href="About.aspx">About</a>
   </li>
</ul>
</div>
   <a id="NavigationMenu_SkipLink"></a>
</div>

2 个答案:

答案 0 :(得分：0)

好的，经过数小时和数小时尝试在web.config中找到解决方案后，我终于发现该解决方案来自mono-apache-server的版本。我使用mono-apache-server2而不是4。 然后我安装了正确的版本，配置了虚拟主机，现在一切正常！

答案 1 :(得分：0)

ASP.NET放入的锚标记会自动在菜单上方添加额外的垂直空间。锚标记会自动放在菜单上方，这会在Internet Explorer和Google Chrome中搞砸渲染。它可以在Mozilla Firefox中正常工作，即使是带有图像的锚点。

要修复，请添加SkipLinkText =＆＃34;＆＃34;属性到您的ASP.NET菜单控件，这将解决渲染问题。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">
相关问题
最新问题