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菜單項垂直間距

回答

相關問題