0
由于某些原因，z-index在ie7中无法正常工作。如果我删除位置：固定从#header它工作正常，但是，因为这个菜单是固定在页面的顶部这是必要的。下拉菜单显示，但只显示底部边界，下面没有任何内容。无法弄清楚这一点。css仅在ie7下拉z-index问题
<!-- 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;
}
奇怪。为我工作在IE7罚款。您的网页上是否宣布了有效的文档类型？ – 2013-02-15 15:40:43
只需使用html5 - <！DOCTYPE html> - 只是为了确保我注释掉了除我的页面上的菜单之外的所有内容......当然需要保留所需的内容，但删除其余的页面内容...仍然有同样的问题。如果它有所作为，我正在使用IE9，并使用开发工具在IE7中显示，我认为大多数人都这么做。如果我删除位置：如上所述修复问题，问题就会消失，但是它再次不会被修复。 – user756659 2013-02-16 00:08:33
我应该注意 - 所有的实际容器底部都有一个双像素边框。下拉“显示”，但只覆盖2像素高度。没有显示任何下面的内容。这不仅仅是常规的顶层悬停状态，因为它不会覆盖边界。很奇怪。在某个时候发生了一些事情，因为我在这一点上都做得很好......可能在我修好之前。 – user756659 2013-02-16 00:17:32