CSS的問題：jqGrid和ASP.Net CSS友好的適配器菜單 - IE7

Question

我在使用jqGrid（v3.6.4）和ASP.Net的CSS友好適配器爲ASP.Net菜單時在IE 6和7中的問題控制。我遇到的問題是無論我使用z-index有多高，但只有我的垂直菜單（使用.AspNet-Menu-Vertical），我的菜單層呈現在我的網格下。當使用水平網格時，子網格會在網格上呈現。一切工作都在我的腦海中使用Firefox或IE8廣告。

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

我的這一個將可能缺少一些細節（CSS缺少一塊拼圖），其被排除在最終的解釋，所以，請要求澄清需要什麼。我不確定問題可能是由絕對定位或相對定位或其他完全混合造成的。也許別人會立即看到，這是在逃避我。並且預先感謝您提供的任何幫助或指導。

好的，讓我說出細節。我正在使用jQueryGrid 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螢火！我使用的是IE開發工具欄，但效果並不好，但我會列出相關塊的當前樣式，並按照塊的CSS代碼進行操作。

當前樣式爲格 「ContentAreaBlock」

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

爲面板 「PanMainVerticalMenu」 當前樣式

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

的分度類 「mainVerticalMenuBlock」 當前樣式

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

當前樣式對於垂直菜單一級

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」

菜單

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

嘗試增加變焦每個元素具有位置：相對

zoom: 1; 

它看起來像某些元素有放大，但並不需要的一切它。對我來說，這聽起來像IE中的經典hasLayout錯誤。