![](/img/trans.png)
[英]HTML/CSS: IE adding offset to <li> - looks fine in Chrome, FF
[英]CSS menu looks good in FF/Chrome/Safari but not IE
我正在使用CMS構建網站,但菜單出現了一些麻煩。 正如主題所說,它在IE中並不完美。 在其他瀏覽器中,我將鼠標懸停在菜單項上,並顯示該項目的子菜單,當我將鼠標懸停在子菜單中的項上時,該項目將以藍色背景突出顯示。 但是,在IE中,當我將鼠標懸停在第一個子菜單項上時,它會高亮顯示,而當我將鼠標懸停在其他子菜單項上時,則不會。 如下面的HTML所示,如果我將鼠標懸停在產品->應用程序上,則背景保持灰色,但是如果我將鼠標懸停在第一項(在線服務)上,則背景變為藍色。
當我將鼠標懸停在主菜單項上時,如果將其懸停或處於活動狀態,則將其作為背景圖像;當我將其懸停在其上時,子菜單將具有灰色背景,將其變為藍色。
的HTML
<div id="header">
<ul id="menuElem">
<li class="home2"><a href="Home.aspx" >Home</a></li>
<li class="products"><a href="Products.aspx" >Products</a>
<ul>
<li><a href="Products/Online-Services.aspx" >Online Services</a></li>
<li><a href="Products/Applications.aspx" >Applications</a></li>
</ul>
</li>
<li class="about"><a href="About.aspx" >About Us</a>
<ul>
<li><a href="Blog.aspx" >Blog</a></li>
<li><a href="About/News.aspx" >News</a></li>
<li><a href="About/Events.aspx" >Events</a></li>
</ul>
</li>
</ul>
</div>
菜單子項的CSS
#header li ul{
background: rgb(211,211,211);
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:161px;
z-index:200;
margin-left: 9px;
}
#header li li {
display:block;
float:none;
padding: 0px;
width:161px;
margin-left: 0px;
border-bottom: 1px solid;
border-color: #fff;
}
#header li:hover ul{
display:block;
}
#header li ul li a {background-image: none;
color:#000;
text-indent: 0px;
width: 161px;
padding-left: 5px;
}
#header li ul li a:hover {background-image: none;
background: rgb(26,66,126);
color:#fff;
}
主菜單的CSS
#header ul {
display:block;
overflow:hidden;
float:right;
width:625px;
height:38px;
margin-top: 0px;
}
#header ul li {
display:block;
overflow:hidden;
float:left;
margin-left:2px;
}
menuhome a {
display:block;
overflow:hidden;
background:url(images/nav_home.png) no-repeat;
width:69px;
height:38px;
text-indent:-900px;
}
.menuhome2 a {
display:block;
overflow:hidden;
background:url(images/nav_homeH.png) no-repeat;
width:69px;
height:38px;
text-indent:-900px;
}
.menuhome a:hover, .menuhome a:active {
background:url(images/nav_homeH.png) no-repeat;
}
.menuabout a {
display:block;
overflow:hidden;
background:url(images/nav_about.png) no-repeat;
width:88px;
height:38px;
text-indent:-900px;
}
.menuabout2 a {
display:block;
overflow:hidden;
background:url(images/nav_aboutH.png) no-repeat;
width:88px;
height:38px;
text-indent:-900px;
}
.menuabout a:hover, .menuabout a:active {
background:url(images/nav_aboutH.png) no-repeat;
}
.menuproducts a {
display:block;
overflow:hidden;
background:url(images/nav_products.png) no-repeat;
width:87px;
height:38px;
text-indent:-900px;
}
.menuproducts2 a {
display:block;
overflow:hidden;
background:url(images/nav_productsH.png) no-repeat;
width:87px;
height:38px;
text-indent:-900px;
}
.menuproducts a:hover, .menuproducts a:active {
background:url(images/nav_productsH.png) no-repeat;
}
通常,我只是在css水平菜單上在線創建一個工具,然后在線復制並粘貼它,但是使用此CMS(在asp.net上構建並使用母版頁),我必須在菜單中為每個菜單分配一個類名項目。
如何為IE修復此問題?
提前致謝。
對於NOT IE CSS,您可以使用條件注釋,請查看本文:
有條件的評論 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.