asp.net - ASP .Net 菜单项垂直间距

Question

我在 ASP.Net 页面上有一个菜单。在 Firefox 中它呈现正确。在 IE 中，下拉菜单项之间有一个小间隙，您可以在其中看到后面的页面。我认为我没有设置任何填充或边距，因为它在 Firefox 中呈现良好。但我认为这是某种 CSS 问题:

<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;
}

Answer 1

尝试删除 div.menu ul li a, div.menu ul li a:visited 样式的所有边距。

随便放

margin: 0;

代替

margin: 0px 5px 0px 5px;