0
好吧，所以我試圖做一個頭位div與位置：固定和添加導航與下拉菜單中。我仍然沒有添加JQuery函數來顯示/隱藏懸停的菜單。該菜單當前在文檔加載中可見。 菜單在Chrome和Firefox中正確顯示，如http://i.imgur.com/KncIMiO.png。但在IE中，頭部div外部的菜單溢出隱藏。在IE中顯示的是這樣的http://i.imgur.com/OBGNYNe.png。 這裏是我的HTML：使位置固定或絕對自動隱藏在IE8中溢出的內容
<!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中顯示，同時保持標題位置：固定？
什麼版本的IE？ – wavemode
我正在使用IE8 @wavemode – Othuna