ASP .Net 菜单项垂直间距

Posted 2023-03-06

【中文标题】ASP .Net 菜单项垂直间距

【英文标题】：ASP .Net Menu Item Vertical Spacing

【发布时间】：2013-01-08 16:41:06

【问题描述】：

我在 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;

【问题讨论】：

哪个版本的IE？我以前见过 IE（我认为是版本 8）在图像周围设置边框，而 Firefox 不会。它可能与您所看到的相似。

【参考方案1】：

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

随便放

margin: 0;

而不是

margin: 0px 5px 0px 5px;

【讨论】：

不。还是同样的问题。