HTML/CSS IE7 z-index 错误答案

【问题标题】：HTML/CSS IE7 z-index bugHTML/CSS IE7 z-index 错误
【发布时间】：2012-04-19 19:36:34
【问题描述】：

两个问题，一大一小。

我有一个可爱的下拉菜单，它在除 IE7 之外的任何其他浏览器中都不会让我感到悲伤。在 IE7 中，它似乎忽略了包含 ul 的下拉列表的 z-index 值，并将其放在内容后面，如下所示：

第二个问题是（你必须尝试菜单才能看到这个）当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% 的宽度，而无需在其上硬编码宽度。

感谢您的帮助。

【问题讨论】：

IE7 故障，见stackoverflow.com/questions/6959608/…
@goldilocks 我正在阅读它，即使我将所有项目设置为相同的位置（这会导致其他问题），即使它的 z-index 更高，它仍然会出现在它们后面。

标签： html css internet-explorer cross-browser

【解决方案1】：

z-index 仅适用于位置relative、absolute 和fixed。像这样写：

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

【讨论】：

谢谢，但它仍然出现在 z-index 低于它的对象后面

【解决方案2】：

从#supplements（不是整个 .grid_16 类）、#logobar、#logo（也继承自 .grid_7）中删除 position:relative。

在这种情况下，这将修复 IE7。除此之外，我认为您使用的样式太多了；通常你使用的越少越好..但这需要更彻底的检修..这么多默认定位，显示：块，浮动，从另一个继承，只能在我的书中出错..

【讨论】：