絕對定位的DIV在另一個絕對定位的DIV中不顯示在IE上

如果您願意，請參考http://stonepay.sonikastudios.com/css/style.css以及http://stonepay.sonikastudios.com/以獲取實際頁面參考。絕對定位的DIV在另一個絕對定位的DIV中不顯示在IE上

我有一個下拉菜單，顯示點擊。這適用於「我們的服務」和「我們的項目」菜單項，淡入和所有作品都很好。作爲不能妨礙其他佈局元素的下拉菜單，div.submenu元素全部設置爲position：absolute; （當然，父div被設置爲position：relative;所以它不是絕對的頁面，而是菜單欄本身）。

div.submenu_close元素嵌套在每個div.submenu文件的末尾。它也被設置爲：絕對的;

總之，這裏是我的CSS：

.submenu { 
    position:absolute; 
    width:auto; 
    padding:0px 10px 0px 10px!important; 
    background-image:url('/images/submenu_bg.jpg'); 
    background-repeat:repeat-x; 
    z-index:99; 
    background-color:#262626; 
    display:none; 
} 

.submenu_column { 
    margin-top:10px !important; 
    margin-bottom:10px !important; 
} 

.submenu_close { 
    width:11px !important; 
    height:11px !important; 
    background-image:url("/images/submenu_close.png"); 
    background-repeat:no-repeat; 
    position:absolute; 
    bottom:7px; 
    right:7px; 
    z-index:15 !important; 
    border:1px solid #f00; 
    display:block; 
}

和HTML結構liek這個（簡化爲只強調結構）：

<div id="menubar"> 
    <ul id="menu"> 
     <li class="current originalcurrent"><a href="/">HOME</a></li> 
     <li><a href="/about-us.php">ABOUT US</a></li> 
     <li><a href="/our-services.php" id="services_menu" class="topmenu">OUR SERVICES</a></li> 
     <li><a href="/our-projects.php" id="projects_menu" class="topmenu">OUR PROJECTS</a></li> 
     <li><a href="/financing-leasing.php">FINANCING &amp; LEASING</a></li> 
     <li><a href="/contact-us.php">CONTACT US</a></li> 
    </ul> 

    <div class="submenu" id="services_submenu"> 
     <div class="grid_3 alpha omega right_dotted submenu_column"> 
     </div> 
     <div class="grid_3 omega right_dotted submenu_column" style="width:175px;"> 
     </div> 
     <div class="submenu_close"><a href="#"><img src="/images/blank.gif" width="100%" height="100%"></a></div> 
     <div class="clear"></div> 
    </div> 


    <div class="submenu" id="projects_submenu"> 
     <div class="grid_3 alpha omega right_dotted submenu_column"> 
     </div> 
     <div class="grid_3 omega right_dotted submenu_column" style="width:175px;"> 
     </div> 
     <div class="submenu_close"><a href="#"><img src="/images/blank.gif" width="100%" height="100%"></a></div> 
     <div class="clear"></div> 
    </div> 
</div>

這使我.submenu_close div的出現只是罰款右下角就很好..除了在Internet Explorer（當然它是IE瀏覽器）。

正如你所看到的，我已經將z-index元素設置得很好。當我將.submenu_close的顯示模式更改爲float：left而不是position：absolute時，它顯示得很好，所以我知道這不是z索引問題。

任何幫助，非常感謝！

來源

2010-09-08 jeffkee

即使您將它作爲其中一個標記，IE8也不會呈現錯誤。你確定這是發生這個問題的版本之一嗎？ – 2010-09-08 12:15:45

我的錯誤 - 我在IE7模式下使用了我的IE8。是的，IE8工作正常。儘管如此，仍然需要它在IE7上工作。 – jeffkee 2010-09-08 12:19:26

似乎在IE8兼容模式下工作在IE8中。 – 2010-09-08 12:41:29

這可能是由於a known bug in IE7（見右側欄）有關嵌套的絕對，固定和相對div。你解釋的順序並不完全符合文件，但根據我的經驗，如果你希望它能在所有版本的IE中正常工作，你需要避免使用這些屬性來嵌套div。

來源

2010-09-08 12:25:22

所以你說我不能在另一個絕對定位的div中嵌套絕對定位的div？ – jeffkee 2010-09-08 22:10:39

該問題是由IE6/7 broken stacking order（也稱爲z-index錯誤）引起的。您需要解決的問題是將關閉按鈕的z-index提高到超過其容器。

來源

2010-09-08 13:18:40 Bundyo

試過了--submenu z索引遠低於.submenu_close z索引。仍然不顯示。 – jeffkee 2010-09-08 22:10:15

我試過所有的東西......甚至z-index：25！important; typeof語法來覆蓋它。沒有..通過從包含.submenu div中刪除背景，我確認.submenu_close div位於正確的位置 - 隱藏在具有較低z-index的.submenu div後面... – jeffkee 2010-09-09 08:48:34

Are you sure ？因爲當我現在看，關閉按鈕在那裏，完全可見。 – Bundyo 2010-09-09 10:36:13

絕對定位的DIV在另一個絕對定位的DIV中不顯示在IE上

回答

相關問題