html - IE 10 中的 Z 索引

Question

如果您检查以下 website在 Internet Explorer 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>

Answer 1

将此添加到您的 html 中:

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

IE 中的页面以 Quirk 模式呈现。