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

Question

当我在 IE 6 和 7 中使用 jqGrid (v3.6.4) 和 ASP.Net 菜单控件的 ASP.Net CSS 友好适配器时遇到问题。我遇到的问题是，无论我的 z 索引有多高，我的菜单层都会呈现在网格下方，但只有垂直菜单（使用 .AspNet-Menu-Vertical）。使用水平网格时，子层在网格上渲染。使用 Firefox 或 IE8，一切都按照我脑海中所宣传的那样进行。

替代文本 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 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 是position:absolute，样式应该是相同的...

<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？

Answer 2

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

zoom: 1;

看起来某些元素具有缩放功能，但并非所有需要缩放的元素都具有缩放功能。对我来说，这听起来像是 IE 中经典的 hasLayout Bug。