HTML/CSS IE7 z-index錯誤

我有一個可愛的下拉菜單，除了IE7以外，沒有任何其他瀏覽器讓我感到悲傷。在IE7它似乎忽略下拉的含ul的z-index價值，並把它像這樣後面的內容：

Comparison of IE7 to firefox

第二個問題是，（你將不得不嘗試在菜單中看到這一點）時在將鼠標懸停在菜單項上後，首先出現ul，寬度很小，並且會彈出一個大小。（只有在IE7再）

這裏你可以看到在行動頁：http://rcnhca.org.uk/sites/first_steps/

下面是相關的HTML標記（請注意我用的是960網格系統）：

<div id="header"> 
     <div class="container_16"> 
      <div class="grid_16" id="breadcrumbs"> 
       <a href="http://rcnhca.org.uk/sites/first_steps" id="home" class="grid_1 alpha"></a> 

       <ul id="parent" class="grid_15 omega"> 
       <li><a href="http://rcnhca.org.uk/sites/first_steps/">Select a topic</a><ul class="child"><li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li></ul></li>     </ul> 
      </div> 
      <div id="supplements" class="grid_16"> 


       <div id="competency_checklist"><a href="#">Competency checklist</a></div> 
      </div> 
     </div> 
    </div>

而且它附帶的CSS

/* ============================================================================= 
    Header 
    ========================================================================== */ 

#header { 
    width: 100%; 
    background: #44a9c4; 
} 

#supplements { 
    height: 45px; 
    background: #44a9c4; 
    z-index: 1; /* ie7 bug fix */ 
} 

#logobar { 
    width: 100%; 
    height: 45px; 
    background: #3393b5; 
    z-index: 1; /* ie7 bug fix */ 
} 

#competency_checklist { 
    display: block; 
    float: left; 
    margin-top: 5px; 
    right: 0px; 
    height: 31px; 
    line-height: 31px; 
    padding: 0 10px 0 36px; 
    background-image: url(library/images/book-icon-white.png); 
    background-position: 5px center; 
    background-repeat: no-repeat; 
    line-height: 31px; 
} 

#competency_checklist a{ 
    font-size: 0.938em; 
    text-decoration: underline; 
    color: #ffffff; 
} 

#competency_checklist a:hover{ 
    text-decoration: none; 
} 

/* ============================================================================= 
    Breadcrumb navigation 
    ========================================================================== */ 


#breadcrumbs { 
    display: block; 
    position: relative; 
    height: 39px; 
    padding-bottom: 3px; 
    background: #ffffff; 
    border: 0px solid; 
    border-left: #3a90a7 2px solid; 
    border-right: #3a90a7 2px solid; 
    border-bottom: #3a90a7 2px solid; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    behavior: url("<?php echo get_template_directory_uri();?>/PIE.php"); 
} 

#breadcrumbs ul { 
    list-style: none; 
    list-style-image: none; 
    margin: 0; 
} 

#breadcrumbs #home{ 
    display: block; 
    height: 39px; 
    background-image: url(library/images/home_icon.png); 
    background-repeat: no-repeat; 
    background-position: 19px center; 
    text-indent: -999em; 
} 

#breadcrumbs ul#parent { 
    display: block; 
    height: 39px; 
    float: right; 
    right: 3px; 
    position: relative; 
    background: #f38630; 
    -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229; 
    -moz-box-shadow: inset 0px -2px 0px 0px #cf7229; 
    box-shadow: inset 0px -2px 0px 0px #cf7229; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

#breadcrumbs ul#parent li { 
    position: relative; 
    height: 39px; 
    float: left; 
    min-width: 1px; /* required to fix Opera bug */ 
    padding: 0 47px 0 15px; 
    background-image: url(library/images/breadcrumb_seperator.png); 
    background-repeat: no-repeat; 
    background-position: right; 
    line-height: 39px; 
    zoom: 1; 
} 

#breadcrumbs ul#parent li a { 
    display: block; 
    height: 42px; 
    position: relative; 
    font-size: 0.938em; 
    font-weight:900; 
    color: #ffffff; 
    text-decoration: none; 
    text-shadow: 0px 2px 0px #cf7229; 
} 

#breadcrumbs ul li a:visited { 
    color: #ffffff; 
} 
#breadcrumbs ul#parent li:first-child ul { 
    left: -5px; 
} 
#breadcrumbs ul#parent li ul { 
    position: absolute; 
    z-index: 9998; 
    left: -28px; 
    top: 42px; 
    background: #ffffff; 
    border-left: #3a90a7 2px solid; 
    border-right: #3a90a7 2px solid; 
    border-bottom: #3a90a7 2px solid; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    padding: 0 3px 0 3px; 
    list-style-position: outside; 
    min-width: 200px; 
    width: auto; 
} 

.js #breadcrumbs ul#parent li ul { 
    display:none; 
} 

.no-js #breadcrumbs ul#parent li ul { 
    left: -999em; 
} 

#breadcrumbs ul#parent li ul li { 
    float: none; 
    display: block; 
    position: relative; 
    height: 26px; 
    margin-bottom: 3px; 
    padding: 0 15px; 
    background-image: url(library/images/star-icon.png); 
    background-position: -25px 50%; 
    background-repeat: no-repeat; 
    background-color: #738793; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    line-height: 26px; 
    white-space: nowrap; 
    zoom: 1; 
} 

#breadcrumbs ul#parent li ul li a{ 
    display: block; 
    width: auto; 
    color: #ffffff; 
    text-decoration: none; 
    text-shadow: none; 
    font-weight: 100; 
} 

#breadcrumbs ul#parent li ul li:hover{ 
    background-color: #3393b5; 
} 

.no-js #breadcrumbs ul#parent li ul li:hover{ 
    background-position: 0px 50%; 
    text-indent: 10px; 
} 

.no-js #breadcrumbs ul#parent li:hover ul { 
    left: -5px; 
} 

/* ============================================================================= 
    Logo bar 
    ========================================================================== */ 

h1#logo { 
    display: block; 
    position: relative; 
    height: 45px; 
    background-image: url(library/images/logo.png); 
    background-position: left 9px; 
    background-repeat: no-repeat; 
    text-indent: -999em; 
}

獎勵積分如果您知道如何使菜單項佔用ul的寬度的100％，而不需要對其寬度進行硬編碼。

感謝您的幫助。

來源

2012-04-19 George Reith

IE7小故障，請參閱http://stackoverflow.com/questions/6959608/ie7-z-index-issue-css-dropdown – delicateLatticeworkFever 2012-04-19 11:05:09

@goldilocks我正在閱讀，即使我把所有的項目設置爲相同的定位（這會導致其他問題），儘管它的z-index更高，它仍然出現在它們後面。 – 2012-04-19 11:11:50

的z-index只有relative位置工作，absolute & fixed。像這樣寫：

#breadcrumbs { 
    position:relative; 
    z-index: 4; 
}

來源

2012-04-19 11:05:20 sandeep

謝謝，但它仍然出現在Z指數較低的對象後面 – 2012-04-19 11:08:52

檢查我的更新可能對你有用 – sandeep 2012-04-19 11:18:31

不錯的一個，作品一個款待：D – 2012-04-19 11:37:35

刪除位置：從#supplements相對（而不是整個.grid_16類），#logobar，#logo（也.grid_7繼承）。

這將修復IE7在這種情況下。除此之外，我認爲你使用的方式太多了;通常你使用的越少越好......但是這需要更徹底的檢修..所以很多默認定位，顯示：塊，浮動，相互繼承，只能在我的書中出錯......

來源

2012-04-19 11:36:34 itchy355

HTML/CSS IE7 z-index錯誤

回答

相關問題