Question

好的，所以我试图用位置制作一个标题div：修复并添加带有下拉菜单的导航。我仍然没有添加JQuery函数来显示/隐藏悬停菜单。菜单当前在文档加载时可见。菜单在chrome和firefox中正确显示，如http://i.imgur.com/KncIMiO.png。但是在IE中，标题div之外的菜单溢出是隐藏的。它在IE中显示为http://i.imgur.com/OBGNYNe.png。这是我的Html：

<!doctype html>
<html>
<head></head><body>

<div id="container">
<div id="header" class="gradient"><div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Topics</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">User</a>
<ul>
 <li>
  <a href="#">Edit profile</a>
  <a href="#">Notifications</a>
  <a href="#">Inbox</a>
  <a href="#">Settings</a>
  <a href="#">Help</a>
  <a href="#">Logout</a>
  </li>
 </ul>
</li>
</ul>
</div>
</div>
<!--[if IE]>
<br>
<![endif]-->
<div id="content" class="bordered">
Hello there !
</div></div>
</body></html>

这里是CSS：

/* Classes */
.bordered{
border:1px solid #EE80ff;
border-radius:10px;
-moz-border-radius:15px;
}
.gradient{
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #DDAAEE));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #DDAAEE 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDAAEE');
}
.no-underline{text-decoration:none;color:#FFFFFF;
}
.no-underline:hover{text-decoration:none;color:#FFFFFF;
}
/* Main */
html *
{
font-family: Arial !important;
}
body {
margin: 0px;
padding: 0px;
}
h1{
    display:inline;
}
p{
    display:inline;
}
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
#container{
width:100%;
margin:0;
padding:0px;
position:relative;
}
#content{
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:54px;
margin-bottom:24px;
min-height:1500px;
padding:0px;
z-index:10;
}
#header{
position:fixed;
top:0;
z-index:1000;
width:100%;
height:48px;
overflow:visible !important;
}

/* Navigation */
#navigation{
    padding-left:60px;
background-image:url("http://localhost/gowemto/img/logo/purple.png");
background-repeat:no-repeat;
    position:relative;
    height:48px;
    margin-left:auto;
    margin-right:auto;
    width:1000px;
     z-index:1010;
}
#navigation ul
{
list-style-type:none;
margin:0;
padding:0;
}
#navigation ul li
{
position:relative;
float:left;
text-align:center;
min-width:60px;
}
#navigation ul li a
{
color:#700080;
display:block;
font-weight:bold;
line-height:48px;
min-width:60px;
}
#navigation ul li a:hover
{
background-color:#CC40EE;
color:#FFFFFF;
text-decoration:none;
}
#navigation ul li ul{
height:auto;
padding:0px;
margin:0px;
border:0px;
width:200px;
position:absolute;
z-index:2000;
background-color:#CC40EE;
}

当我删除位置时：从标题的css中修复。它在IE中正确显示。有人可以告诉我有什么问题吗？如何在保持标题位置的同时让菜单显示在IE中：固定？

Answer 1

请参阅我的更新代码：

http://jsbin.com/fupor/1/

您应该从#header中删除z-index。

<!doctype html>
<html>

<head>
    <title>sdfs</title>
    <style>
    /* Classes */
    .bordered {
        border:1px solid #EE80ff;
        border-radius:10px;
        -moz-border-radius:15px;
    }
    .gradient {
        background-image: -ms-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
        background-image: -moz-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
        background-image: -o-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #DDAAEE));
        background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #DDAAEE 100%);
        background-image: linear-gradient(to bottom, #FFFFFF 0%, #DDAAEE 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDAAEE');
    }
    .no-underline {
        text-decoration:none;
        color:#FFFFFF;
    }
    .no-underline:hover {
        text-decoration:none;
        color:#FFFFFF;
    }
    /* Main */
    html * {
        font-family: Arial !important;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
    h1 {
        display:inline;
    }
    p {
        display:inline;
    }
    a {
        text-decoration:none;
    }
    a:hover {
        text-decoration:underline;
    }
    #container {
        width:100%;
        margin:0;
        padding:0px;
        position:relative;
    }
    #content {
        width:1000px;
        margin-left:auto;
        margin-right:auto;
        margin-top:54px;
        margin-bottom:24px;
        min-height:1500px;
        padding:0px;
        z-index:10;
    }
    #header {
        position:fixed;
        top:0;
        /* z-index:1000; */
        width:100%;
        height:48px;
        overflow:visible !important;
    }
    /* Navigation */
    #navigation {
        padding-left:60px;
        background-image:url("http://localhost/gowemto/img/logo/purple.png");
        background-repeat:no-repeat;
        position:relative;
        height:48px;
        margin-left:auto;
        margin-right:auto;
        width:1000px;
        z-index:1010;
    }
    #navigation ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    #navigation ul li {
        position:relative;
        float:left;
        text-align:center;
        min-width:60px;
    }
    #navigation ul li a {
        color:#700080;
        display:block;
        font-weight:bold;
        line-height:48px;
        min-width:60px;
    }
    #navigation ul li a:hover {
        background-color:#CC40EE;
        color:#FFFFFF;
        text-decoration:none;
    }
    #navigation ul li ul {
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        width:200px;
        position:absolute;
        z-index:2000;
        background-color:#CC40EE;
    }
    </style>
</head>

<body>

    <div id="container">
        <div id="header" class="gradient">
            <div id="navigation">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Profile</a>
                    </li>
                    <li><a href="#">Topics</a>
                    </li>
                    <li><a href="#">Chat</a>
                    </li>
                    <li><a href="#">User</a>
                        <ul>
                            <li>
                                <a href="#">Edit profile</a>
                                <a href="#">Notifications</a>
                                <a href="#">Inbox</a>
                                <a href="#">Settings</a>
                                <a href="#">Help</a>
                                <a href="#">Logout</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!--[if IE]>
<br>
<![endif]-->
        <div id="content" class="bordered">
            Hello there !
        </div>
    </div>
</body>

</html>

使用固定位置或绝对自动生成div可以隐藏IE8中的溢出内容

1 个答案: