[英]Menu behaves differently in IE
I'm working on a site that works as expected in Chrome but opening it in Internet Explorer a see that the navigation menu is out of place. 我正在一个可以在Chrome上正常工作的网站上,但是在Internet Explorer中打开它却发现导航菜单不正确。
Investigating the problem a saw that not all the list items are wrapped inside the main ul and 2 list items do not have the correct class. 研究此问题后,发现并非所有列表项都包装在主ul中,并且2个列表项没有正确的类。
The one with the problem: 有问题的一个:
The correct one: 正确的:
My project is made using ASP.NET MVC 4 and Umbraco CMS. 我的项目是使用ASP.NET MVC 4和Umbraco CMS制作的。 The menu View looks like this:
菜单视图如下所示:
<ul class="nav">
<li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
@foreach (var item in menuItems)
{
<li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="@item.Url">@item.Name</a>
@{ var subMenuItems = item.Children.Where("Visible"); }
@if (subMenuItems.Count() > 0)
{
<ul>
<li>
@foreach (var sub in subMenuItems)
{
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<a href="@sub.Url"><img src="@Umbraco.Field(sub, "menuItemImage", recursive: true)"></a>
</div>
<div class="NavItemDesc">
<a href="@sub.Url">
<span>@sub.Name</span><br>
<span>@sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<li><a class="parent" href="@sub.Url">@sub.Name</a></li>}
}
</li>
</ul>
}
</li>
}
</ul>
This works fine in Chrome, and cant seem to find the problem for IE. 这在Chrome中正常运行,似乎无法找到IE的问题。
You should have a new list item for each submenu rather than wrapping all the submenus in one list item (or otherwise nesting list items without separating them into proper nested lists with a ul
wrapper). 您应该为每个子菜单都有一个新的列表项,而不是将所有子菜单都包装在一个列表项中(或者嵌套列表项,而不用
ul
包装器将它们分成适当的嵌套列表)。
<ul class="nav">
<li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
@foreach (var item in menuItems)
{
<li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="@item.Url">@item.Name</a>
@{ var subMenuItems = item.Children.Where("Visible"); }
@if (subMenuItems.Count() > 0)
{
<ul>
@foreach (var sub in subMenuItems)
{
<li>
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<a href="@sub.Url"><img src="@Umbraco.Field(sub, "menuItemImage", recursive: true)"></a>
</div>
<div class="NavItemDesc">
<a href="@sub.Url">
<span>@sub.Name</span><br>
<span>@sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<a class="parent" href="@sub.Url">@sub.Name</a>}
</li>
}
</ul>
}
</li>
}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.