1
如果使用Internet Explorer 10检查以下website，导航的子菜单将隐藏在图像后面。Z-index in IE 10
我试着调整z-index值，帮助Firefox/Chrome浏览器，但没有与IE浏览器。代码可以在here找到。
<style>
body {
width: 100%;
height: 100%;
margin:0;
padding:0;
background-color: #393939;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/*horizontal menu styles*/
nav {
background: #916A31;
height: 2.3em;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
ul {
background: #D5973C;
height: 2em;
width: 100%;
}
li {
position: relative;
}
li a {
display: block;
line-height: 2em;
padding: 0 1em;
color: white;
text-decoration: none;
}
li a:hover, .topmenu li:hover > a {
background: #916A31;
height: 2em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
}
.current, a:hover.current, .topmenu li:hover a.current {
background: #AD9B7F;
color: #eee;
padding-top: .3em;
border-radius: .3em .3em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #917F63;
cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
float: none;
background: #916A31;
width: auto;
height: auto;
position: absolute;
top: 2em;
left: -9000em;
/* -9000em */
z-index: 1000000;
}
ul.submenu li {
float: none;
}
.topmenu li:hover ul {
left: 0;
}
ul.submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li a:hover {
background: #D5973C;
height: 2em;
padding-top: .2em;
top: 0;
border-radius: 0;
}
header {
width: 960px;
}
nav {
width: 960px;
clear: both;
height: 25px;
background: #0079c0;
background: -webkit-gradient(linear, left top, left bottom, from(#0584d3), to(#0666a3));
background: -moz-linear-gradient(top, #0584d3, #0666a3);
background: -ms-linear-gradient(top, #0584d3, #0666a3);
}
article {
width: 960px;
height: 600px;
background: white;
overflow: hidden;
text-align:center;
-moz-box-shadow: 0 0 20px #888;
-webkit-box-shadow: 0 0 20px#888;
box-shadow: 0 0 20px #888;
z-index:0;
}
.logo {
float: left;
width: 65%;
}
.search {
padding-top: 17px;
width: 35%;
float: right;
}
.darkbg {
width: 100%;
height: 100px;
padding-top: 20px;
background: black;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#393939));
background: -moz-linear-gradient(top, #000, #393939);
background: -ms-linear-gradient(top, #000000, #393939);
}
footer {
width: 100%;
height: 200px;
background: black;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#393939));
background: -moz-linear-gradient(top, #000, #393939);
background: -ms-linear-gradient(top, #000000, #393939);
}
.lightbg {
width: 100%;
background-color: #d9d9d9;
background-image:url('images/party-cartoon-wild-bunch-adventures.png');
}
input {
border: 3px solid white;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
margin: 0 0 10px 0;
font-size:20px;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.5) url(http://patrickjamesgeorge.id.au/mb/images/magnify.png) no-repeat 3px 3px;
padding:9px 5px 5px 36px;
}
.smallBox1 {
border:0px solid;
border-radius:3px;
border-color: grey;
width: 293;
height: 260;
float: left;
margin-left:20;
background-image:url('images/a.jpg');
background-color:#cccccc;
}
.smallBox2 {
border:0px solid;
border-radius:3px;
border-color: grey;
width: 293;
height: 260;
float: left;
margin-left:20;
background-image:url('images/b.jpg');
background-color:#cccccc;
}
.smallBox3 {
border:0px solid;
border-radius:3px;
border-color: grey;
width: 293;
height: 260;
float: left;
margin-left:20;
background-image:url('images/c.jpg');
background-color:#cccccc;
}
.smallBoxText {
margin-top: 240;
background-color:white;
width: 293;
opacity:0.75;
}
</style>
<body>
<div align="center">
<div class="darkbg">
<header>
<div class="logo" align="left">
<img id="logo" src="http://patrickjamesgeorge.id.au/mb/images/MB_Logo.png" width="600" height="78" alt="Logo" />
</div>
<div class="search" align="right">
<input type="text" onBlur="if(this.value == '') { this.value = 'Search Site'; }" onFocus="if(this.value == 'Search Site') { this.value = ''; }" value="Search Site" size="20">
</div>
</header>
</div>
<div class="lightbg">
<nav class="cf">
<nav class="cf">
<ul class="topmenu">
<li><a href="index.html" title="Home page" class="current">Home</a>
</li>
<li><a href="offers.php" title="What's on offer">Offers</a>
<ul class="submenu">
<li><a href="adult.php" title="Adult Entertainment">Adult entertainment</a>
</li>
<li><a href="pbv.php" title="Pubs, Clubs & Bars">Pubs, Clubs & Bars</a>
</li>
<li><a href="outdoor.php" title="Outdoor Activities">Outdoor activities</a>
</li>
<li><a href="tours.php" title="Tours & Cruies">Tours & cruises</a>
</li>
<li><a href="transport.php" title="Transport">Transport</a>
</li>
<li><a href="stayhome.php" title="Stay At Home">Stay at home</a>
</li>
<li><a href="sportevents.php" title="Sport Events">Sport events</a>
</li>
<li><a href="dudefood.php" title="Dude Food">Dude food</a>
</li>
</ul>
</li>
<li><a href="register.php" title="Add my business">Register</a>
</li>
<li><a href="about.php" title="More about us">About</a>
</li>
<li><a href="contact.php" title="contact us">Contact</a>
<ul class="submenu">
<li><a href="service.php" title="customer service">Customer service</a>
</li>
<li><a href="register.php" title="register for an account">Register</a>
</li>
<li><a href="support.php" title="technical support">Technical support</a>
</li>
</ul>
</li>
<li><a href="admin.php" title="admin">Admin</a>
<ul class="submenu">
<li><a href="config.php" title="Edit image fader images">Edit image fader images</a>
</li>
</ul>
</li>
</ul>
</nav>
</nav>
<article>
<div class="images">
<img src="http://patrickjamesgeorge.id.au/mb/images/1.jpg" width="960" height="300" alt="1" id="mainImage1" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/2.jpg" width="960" height="300" alt="2" id="mainImage2" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/3.jpg" width="960" height="300" alt="3" id="mainImage3" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/4.jpg" width="960" height="300" alt="4" id="mainImage4" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/5.jpg" width="960" height="300" alt="5" id="mainImage5" style="z-index:0" />
</div>
<div class="smallBox1">
<div class="smallBoxText">
<p>By nature, the background color...</p>
</div>
</div>
<div class="smallBox2">
<div class="smallBoxText">
<p>This is just some test text.</p>
</div>
</div>
<div class="smallBox3">
<div class="smallBoxText">
<p>Because all the columns are floated.</p>
</div>
</div>
</article>
</div>
</div>
<footer></footer>
</body>
与z-index相比，Z-index较低 – PraJen 2013-05-06 08:46:33
将<！DOCTYPE html>添加到页面顶部。所有将被修复。 @滴答的答案在本质上是正确的，尽管我不同意他提出的解决方案。 – ebolyen 2013-05-06 08:57:52