ASP .Net菜单项垂直间距

我在ASP.Net页面上有一个菜单。在Firefox中，它呈现正确。在IE中，下拉菜单项中的项目之间有一个小小的差距，您可以在其中看到后面的页面。我不认为我有任何填充或边距设置，因为它在Firefox中渲染得很好。但我认为这是某种形式的CSS问题：ASP .Net菜单项垂直间距

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="true" IncludeStyleBlock="false" Orientation="Horizontal"> 
       <Items> 
        <asp:MenuItem NavigateUrl="~/ProviderPages/Home.aspx" Text="Home" /> 
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" /> 
        <asp:MenuItem NavigateUrl="~/ProviderPages/ProviderTemp.aspx" Text="Providers"> 
         <asp:MenuItem NavigateUrl="~/ProviderPages/ProviderAccess.aspx" Text="Provider Access" /> 
         <asp:MenuItem NavigateUrl="~/ProviderPages/ProviderTempAdd.aspx" Text="Provider Add" /> 
        </asp:MenuItem> 
        <asp:MenuItem NavigateUrl="~/ProviderPages/AgencyTemp.aspx" Text="Agencies"> 
         <asp:MenuItem NavigateUrl="~/ProviderPages/AgencyAccess.aspx" Text="Agency Access" /> 
         <asp:MenuItem NavigateUrl="~/ProviderPages/AgencyTempAdd.aspx" Text="Agency Add" /> 
        </asp:MenuItem> 
        <asp:MenuItem NavigateUrl="~/SystemPages/Maintenance.aspx" Text="Maintenance"> 
         <asp:MenuItem NavigateUrl="~/Account/ChangePassword.aspx" Text="Change Password" /> 
         <asp:MenuItem NavigateUrl="~/SystemPages/Email.aspx" Text="Send Email" /> 
         <asp:MenuItem NavigateUrl="~/SystemPages/UserManagement.aspx" Text="Manage User Accounts" /> 
         <asp:MenuItem NavigateUrl="~/SystemPages/AgencyEdits.aspx" Text="Review Agency Edits" /> 
         <asp:MenuItem NavigateUrl="~/SystemPages/ProviderEdits.aspx" Text="Review Provider Edits" /> 
         <asp:MenuItem NavigateUrl="~/SystemPages/ErrorLog.aspx" Text="Error Log" /> 
        </asp:MenuItem> 

       </Items> 
      </asp:Menu>

造型设计是这样的：

div.menu 
{ 
color: White; 
font-family: 'Tahoma', 'Geneva', sans-serif; 
font-size: 12px; 
font-weight: 500; 
padding:3px 0px 3px 0px; 
text-decoration: none; 
float: right; 

} 

div.menu ul 
{  
list-style: none; 
margin: 0px; 
width: auto; 
padding: 5px 8px 4px 8px; 
text-transform: uppercase; 
} 

div.menu ul li a, div.menu ul li a:visited 
{ 
background-image: url("Images/bg_nav.png"); 
background-repeat:repeat-y; 
border-style:none; 
color: #dde4ec; 
display: block; 
line-height: 1.35em; 
padding: 5px 5px; 
text-decoration: none; 
white-space: nowrap; 
margin: 0px 5px 0px 5px; 
} 

div.menu ul li a:hover 
{ 
background-image: url("Images/bg_nav.png"); 
background-repeat:repeat-y; 
color: White; 
text-decoration: none; 
} 

div.menu ul li a:active 
{ 
background-image: url("Images/bg_nav.png"); 
background-repeat:repeat-y; 
color: White; 
text-decoration: none; 
}

来源

2013-01-24 Ethan Schofer

IE的哪个版本？我见过IE（版本8，我认为）在图像之前放置了边界，而Firefox不会。这可能与你所看到的相似。 – Jagd

尝试删除所有的利润为div.menu UL李一，div.menu UL李一：参观风格。

只要把

margin: 0;

，而不是

margin: 0px 5px 0px 5px;

来源

2013-02-26 15:57:49 Jagd

没有。仍然是同样的问题。 –

ASP .Net菜单项垂直间距

回答

相关问题