我在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;
}
答案 0 :(得分:1)
尝试删除 div.menu ul li a,div.menu ul li a:visited style的所有边距。
刚刚放
margin: 0;
而不是
margin: 0px 5px 0px 5px;