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

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 拼图），所以请询问任何需要澄清的内容。我不确定问题是否是由绝对定位和相对定位的混合引起的，还是完全由其他原因引起的。也许别人会立刻看到，它在躲避我。并提前感谢您提供的任何帮助或指导。

好的，让我列出细节。我正在使用带有 jQ​​uery UI 框架支持的 jqGrid 版本 3.6.4。我也在使用自定义的 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 开发工具栏，不是很好，但我会列出相关块的当前样式，并在其后面加上块的 CSS 代码。

Div“ContentAreaBlock”的当前样式

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

面板“PanMainVerticalMenu”的当前样式

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

具有“mainVerticalMenuBlock”类的 Div 的当前样式

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

垂直菜单层 1 的当前样式

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

具有 css 类的面板的当前样式 "contentContainer ContentLeftMargin 内容字体"

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

尝试为 每个具有 position:relative 的元素添加缩放

zoom: 1;

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

Answer 2

您能否重新排序 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 可能需要 position:relative 哦，你试过firebug lite吗？