我正在使用asp.net(4.0)菜单控件。
为了解决“菜单闪烁”问题,我将子菜单的显示设置为无。我遇到的问题是,当我对渐变使用过滤器时,sub-sub菜单(第三级)没有显示在IE(至少是IE 7-8)中。
我认为过滤器梯度会以某种方式与z-index混淆,因为如果我使用内置的IE开发人员工具删除了asp.net设置的z-index,则子菜单会显示(带有错误的z-index,但在至少出现)。我尝试在页面加载时使用css或JavaScript手动设置z-index,但是似乎无法显示它。
这是CSS和标记:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.MenuFix ul li ul
{
display:none;
}
div.menu ul ul
{
background-color: #003775;
background: -webkit-gradient(linear, left top, left bottom, from(#003775), to(#001F42));
background: -moz-linear-gradient(top, #003775, #001F42);
/*Either filter causes the problem*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#003775, endColorstr=#001F42);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#003775, endColorstr=#001F42)";
position:absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="PageWrapper">
<div class="header">
<div class="MainMenu MenuFix">
<asp:Menu ID="mnMainMenu" Orientation="Horizontal" CssClass="menu" runat="server"
StaticSubMenuIndent="16px" DynamicPopOutImageTextFormatString=""
StaticEnableDefaultPopOutImage="False">
<DynamicMenuStyle />
<Items>
<asp:MenuItem Text="Home" />
<asp:MenuItem Text="Top Level Item 2">
<asp:MenuItem Text="Sub Item" />
<asp:MenuItem Text="Sub Menu" >
<asp:MenuItem Text="Not Displayed" />
<asp:MenuItem Text="Not Displayed" />
</asp:MenuItem>
<asp:MenuItem Text="Sub Item" />
</asp:MenuItem>
<asp:MenuItem Text="Top Level Item 3" />
</Items>
<StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="5px" />
</asp:Menu>
</div>
</div>
</div>
</form>
</body>
</html>
谢谢。
最佳答案
透明PNG是IE 7的受支持功能。您可能会摆脱DXImageTransform调用,而像在其他浏览器中一样,在CSS中对其进行处理。
拥有DXImageTransform引用的唯一原因是支持IE 6。占普通用户群的比例很小(少于2%,并且每个月都在下降)。
更多信息:
http://www.atalasoft.com/cs/blogs/davidcilley/archive/2007/03/14/ie7-dximagetransform-and-png-transparency-problem.aspx
http://blogs.msdn.com/b/ie/archive/2005/04/26/412263.aspx