Question

由于某种原因，z-index仅在ie7中无法正常工作。如果我删除位置：从#header修复它可以正常工作，但是，由于此菜单要固定在页面顶部，这是必需的。下拉列表显示，但仅在底部边框上方，而在此之下没有任何内容。无法想出这个。

<!-- start fixed header container -->
<div id="header_container">
    <!-- start header -->
    <div id="header">
        <!-- start container -->
        <nav>
            <div class="container">
                <div id="logo">logo here</div>
                <div id="top_menu">
                    <ul>
                        <li><a href="/#">Features</a>
                            <div class="drop">
                                <div>
                                    <ul>
                                        <li class="title"><a href="/#1">heading with link</a></li>
                                        <li><a href="/#1">testing 1</a></li>
                                        <li><a href="/#2">testing 2</a></li>
                                        <li><a href="/#3">testing 3</a></li>
                                    </ul>
                                    <ul>
                                        <li class="title"><a href="/#1">and another heading</a></li>
                                        <li><a href="/#1">testing 1</a></li>
                                        <li><a href="/#2">testing 2</a></li>
                                        <li><a href="/#3">testing 3</a></li>
                                    </ul>
                                </div>
                                <div class="extra">
                                    <ul>
                                        <li class="title">heading with NO link</li>
                                        <li><a href="/#4">testing 4</a></li>
                                        <li><a href="/#5">testing 5</a></li>
                                        <li><a href="/#6">testing 6</a></li>
                                    </ul>
                                    <ul>
                                        <li class="title">plain info description goes as far as I want <br />with no link blah blah blah blah blah</li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="/#">Download</a></li>
                        <li><a href="/#">Purchase</a></li>
                        <li><a href="/#">Support</a>
                            <div class="drop">
                                <div>
                                    <ul>
                                        <li class="title">How can we help you?</li>
                                        <li><a href="/#1">FAQs</a></li>
                                        <li><a href="/#2">How To Guides</a></li>
                                        <li><a href="/#3">Online Documentation</a></li>
                                        <li><a href="/#3">Contact Us</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="/#">Account Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- end container -->
        <div class="header_shadow"></div>
    </div>
    <!-- end header -->
</div>
<!-- end header container -->



#header_container{
width:100%;
height:52px;
}

#header{
width:100%;
height:50px;
position:fixed;
border-bottom:2px #3c9ac4 solid;
background: #00457b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1e70b2), to(#00457b)); 
background-image: -webkit-linear-gradient(top, #1e70b2, #00457b); 
background-image:    -moz-linear-gradient(top, #1e70b2, #00457b); 
background-image:     -ms-linear-gradient(top, #1e70b2, #00457b); 
background-image:      -o-linear-gradient(top, #1e70b2, #00457b); 
background-image:         linear-gradient(top, #1e70b2, #00457b);
 }

.ie8 #header, .ie9 #header{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e70b2', endColorstr='#00457b',GradientType=0 ) ;
}

.header_shadow{
width:100%;
height:10px;
position:absolute;
z-index:900;
display:none;
left:0;
top:52px;
background:url(/images/header_shadow.png) repeat-x;
 }


 /* Top Menu
 ================================================== */

#logo{
width:200px;
float:left;
}

/*menu container centered*/
#top_menu{
width:760px;
float:left;
}

/*entire menu ul*/
#top_menu ul{
position:relative;
z-index:1000;
margin:0;
float:right;
height:50px;
line-height:50px;
}

/*top link container*/
#top_menu ul li{
display:block;
float:left;
}

/*top link*/
#top_menu ul li a{
display:block;
color:#f1f1f1;
text-decoration:none;
padding:0 20px;
font-size:14px;
}

/*top link hover*/
#top_menu ul li:hover > a{      
color: #f1f1f1;
background:#555555;
}


/*show dropdown and position under tab*/
#top_menu ul li:hover > .drop{
display:block;
top:auto;
}

/*drop down container*/
#top_menu ul li .drop{
position:absolute;
z-index:1000;
display:none;
padding:15px 0 0 0;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;

background:#555555;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#202020)); 
background-image: -webkit-linear-gradient(top, #555555, #202020); 
background-image:    -moz-linear-gradient(top, #555555, #202020); 
background-image:     -ms-linear-gradient(top, #555555, #202020); 
background-image:      -o-linear-gradient(top, #555555, #202020); 
background-image:         linear-gradient(top, #555555, #202020);
font-size:13px;
}

.ie8 #top_menu ul li .drop{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#202020',GradientType=0 ) ;
}

.ie9 #top_menu ul li .drop{
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1ODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NTU1NTUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMyMDIwMjAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODIpIiAvPgo8L3N2Zz4=);
}

/*drop down div*/
#top_menu ul li .drop div{
float:left;
padding:0 30px 0 10px;
line-height:normal;
}

/*drop down div floated left*/
#top_menu ul li .drop div.extra{
/*border-left:1px #eeeeee solid;*/
}

#top_menu ul li .drop div .title, #top_menu ul li .drop div .title a{
padding:0 0 4px 0;
border:none;
color:#f1f1f1;
font-size:13px;
}

#top_menu ul li .drop div .title a:hover{
text-decoration:underline;
}

#top_menu ul li .drop div ul{
width:auto;
height:auto;
float:none;
background:none;
border:none;
margin:0 0 15px 0;
}

#top_menu ul li .drop div ul li{
float:none;
padding:1px 0 1px 0;
line-height:normal;
}

#top_menu ul li .drop div ul li:hover a{
background:none;
}

#top_menu ul li .drop div ul li a{
display:inline;
padding:0;
border:none;
color:#6cc5d8;
font-size:13px;
}

#top_menu ul li .drop div ul li a:hover{
text-decoration:underline;
}

Answer 1

我能够通过添加另一个包装器缠绕标头并使其固定位置来解决问题。所以它作为容器的宽度/高度（保持页面其余部分的间距正确），容器宽度/高度固定，然后标题容器中带有徽标/下拉列表。解决了ie7中的问题，其他所有浏览器都运行良好。

css仅在ie7中下拉z-index问题

1 个答案: