Question

在使用jqGrid（v3.6.4）和ASP.Net CSS Friendly Adapters进行ASP.Net菜单控件时，我在IE 6和7中遇到了问题。我遇到的问题是我的菜单层在我的网格下呈现，无论我使用z-index有多高，但只有我的垂直菜单（使用.AspNet-Menu-Vertical）。使用水平网格时，子网在网格上呈现。使用Firefox或IE8，一切都像我脑子里宣传的一样。

alt text http://www.holenet.com/jqGridMenuIssue.jpg

我对这一个的解释可能最终会遗漏一些遗漏的细节（缺少css拼图），所以请只需要任何需要澄清的内容。我不确定问题是否可能是由绝对和相对位置的混合或其他完全引起的。也许别人会马上看到它，它正在躲避我。并提前感谢您提供任何帮助或指导。

好的，让我详细说明一下。我正在使用jqGrid版本3.6.4和jQuery UI框架支持。我也使用自定义jQuery UI主题，但除了颜色更改等之外，没有添加或修改特殊样式。

布局代码

<div id="ContentAreaBlock">
<asp:Panel ID="PanMainVerticalMenu" runat="server" 
      CssClass="mainVerticalMenuContainer">
    <div class="mainVerticalMenuBlock">
        <asp:menu id="MenuMainVerticalNavigation" runat="server" 
            cssselectorclass="MenuMainNavigation" Orientation="Vertical"/> 
    </div>
</asp:Panel>

<asp:Panel ID="PanContentContainer" runat="server" CssClass="contentContainer
      ContentLeftMargin Contentfont">
    <div style='width: 100%'>
        <div id="gridWrapperAssets">
            <table id="gridTableAssets"></table> 
            <div id="pagerAssets" style="text-align:center;"></div> 
        </div>
    </div>
</asp:Panel>
</div>

我讨厌在IE中没有FireBug！我使用的是IE Developer Toolbar，不是那么好，但我会列出相关块的当前样式，并按照块的CSS代码进行操作。

Div的当前样式“ContentAreaBlock”

border: solid 1px #1b1b1b;
display: block;

面板的当前样式“PanMainVerticalMenu”

position: absolute; 
left: 0; 
top: 0;
display: block;

Div的当前样式，类为“mainVerticalMenuBlock”

display: block;
hasLayout: -1;
position: relative;
width: 107px;
zoom: 100%;

垂直菜单第1层的当前样式

display: block;
line-height: 1;
margin: 0px;
position: relative;
z-index: 1300;

具有css类的Panel的当前样式 “contentContainer ContentLeftMargin Contentfont”

display: block;
font-size: 1.1em;
margin: auto 10px auto 75px;
padding: 8px 0px 8px 0px;

表格“gridTableAssets”的当前样式

background: #f0eee5 url('some image') 50% 50%;
border: solid 1px #d9d6c4;
display: block;
hasLayout: -1;
line-height: 1;
margin: 0px;
position: relative;
unicode-bidi: embed;
width: 870px;
z-index: 0;

菜单的CSS代码

.mainVerticalMenuContainer
{
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 14.5em 0 0 0.5em;
}

.mainVerticalMenuBlock
{
    width: 107px; 
    background-color: #e5ebdf; 
    border: solid 1px #475460;
    padding: 0.3em 0 0.3em 0;
}

ul.AspNet-Menu 
{
    position: relative;
}

ul.AspNet-Menu, ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;
}

ul.AspNet-Menu li
{
    position: relative;
    list-style: none;
    float: left;
}

ul.AspNet-Menu li a, ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}

ul.AspNet-Menu ul
{
    position: absolute;
    visibility: hidden;    
}

.MenuMainNavigation .AspNet-Menu-Vertical
{
    position:relative;
    z-index: 1300;
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu
{
    width: 107px;
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu ul
{
    background: #d2e2ca;
    width: 19em;
    top: 0px;
    left: 105px;
    border: solid 2px #253d56;
    z-index: 1400; /*TESTING Made it 1400 from 400 */
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu ul ul
{
    width: 19em;
    z-index: 1500;
}
.MenuMainNavigation ul.AspNet-Menu ul li a, .MenuMainNavigation ul.AspNet-Menu ul li span
{
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    border: none;
}

Answer 1

你能重新排序PanMainVerticalMenu和PanContentContainer以便容器是第一个吗？我之前遇到过IE7的问题，它忽略了z-index并且只使用了元素的顺序。

由于您的PanMainVerticalMenu是位置：绝对样式应该是相同的......

<div id="ContentAreaBlock">
<asp:Panel ID="PanContentContainer" runat="server" CssClass="contentContainerContentLeftMargin Contentfont">...</asp:Panel>

<asp:Panel ID="PanMainVerticalMenu" runat="server" CssClass="mainVerticalMenuContainer">...</asp:Panel>
</div>

ContentAreaBlock可能需要位置：相对哦，你试过firebug lite吗？

Answer 2

尝试将缩放添加到位置为：relative

的每个元素

zoom: 1;

看起来有些元素有缩放，但不是所有需要它的东西。对我来说，这听起来像IE中的经典hasLayout Bug。

CSS问题：jqGrid和ASP.Net CSS友好适配器菜单 - IE7

2 个答案: