Question

我目前正在编写一个我为父亲工作过的网站，并且遇到了可怕的IE问题。

我在页面顶部有一个滑块，顶部有一个深色透明菜单栏，应用Z索引将其带到前面。它可以在所有浏览器中完美呈现，但PC上的IE除外。

页面应该像这样呈现：

http://cl.ly/GOCC

请注意，在透明导航栏下可以看到窃贼帽的顶部。

在IE中，它呈现如下：

http://cl.ly/GO6O

请注意，它会将滑块图像向下推到透明导航div下方（同样，使用帽子作为防御点）。

有没有人对我如何纠正这个有任何建议？我不是一个经验丰富的编码器，并且不太适合IE修复！我搜索了互联网，但无济于事......帮助！

我的HTML如下：

<div class="navigation">
            <div class="container">
                <h1>Plymstock Security Systems</h1>
                <ul id="navigationlinks">
                    <li><a href="#">Products & Services</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Recent Projects</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

        <div id="sliderarea">

            <div id="state1">

            </div>
            <img src="images/slider1.png" alt=""/>
        </div>

        <div class="contentarea">
        </div>

CSS如下：

.navigation {

position: relative;

z-index: 1991;

height: 140px;

background-repeat: repeat;
background-image: url(../images/navbgtrans.png);

}

.navigation h1 {
margin-left: -9px;
height: 140px;
width: 202px;
background-repeat: no-repeat;
background-image: url(../images/logo.png);
text-indent: -9999px;
}

ul#navigationlinks {
z-index: 0;
margin-top: -83px;
float: right;
list-style-type: none;
}

#navigationlinks li {
padding-left: 20px;
float: left;
}

#navigationlinks li a {
color: #bfbfbf;
font-size: 20px;
font-family: FreightSansBook;
text-decoration: none;
}

#navigationlinks li a:hover {
color: white;
}

#state1 {
background-image: url(../images/sliderbg1.png);
}

非常感谢您提供给我的任何帮助。

Internet Explorer Z-Index定位问题 - 推送内容

0 个答案: