[英]Website menu with position fixed not showing in Internet Explorer 9
我正在制作一個預覽網站,但我注意到該網站未在IE9中顯示菜單。 我使用Fullpage.js作為基本模板並進行了添加。 我按照fullpage.js文檔中的建議構建菜單:
<img class="menuknop" src="img/menuknop.png" alt="Menu button"/>
<ul class="menu">
<li data-menuanchor="Home" class="active"><a href=#Home>Home</a></li>
<li data-menuanchor="About"><a href=#About>About</a></li>
<li data-menuanchor="Concerts"><a href=#Concerts>Concerts</a></li>
<li data-menuanchor="Media"><a href=#Media>Media</a></li>
<li data-menuanchor="Contact"><a href=#Contact>Contact</a></li>
</ul>
並添加了以下css:
.menuknop{
position: fixed;
top: 1%;
left:1%;
width: 50px;
height: auto;
}
.menu{
position:fixed;
top:1.5%;
left: 80px;
height: 50px;
width: 100%;
padding: 0;
margin:0;
font-size: 1em;
overflow:hidden;
}
.menu li {
display:inline-block;
margin: 0px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
.menu li a{
text-decoration:none;
color: #000;
}
.menu li.active a:hover{
color: #000;
}
.menu li:hover{
background: rgba(255,255,255, 0.8);
}
.menu li a,
.menu li.active a{
padding: 9px 18px;
display:block;
}
.menu li.active a{
color: #fff;
}
div放置在正確的位置,但內容未在IE9中顯示。 我一直盯着這個看了好幾個小時,我真的被卡住了。 任何幫助將不勝感激。
這是測試站點的鏈接 。
看來您需要按如下所示將ul.menu和img.menuknop上的z-index
ul.menu, .menuknop{z-index:99}
我想這將解決您的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.