Z-index或溢出问题，在css菜单上，IE 9中有渐变背景 [英] Z-index or overflow issue, on a css menu, with gradient background in IE 9

问题描述

当IE尝试以< ul> 和<$显示 css：hover 菜单时，在菜单的容器上使用渐变背景时，c $ c>< li> 。

悬停li在使用渐变bg，并正确显示没有渐变bg。

它适用于Chrome和FF ...

使用渐变演示

无梯度演示

使用渐变来源（不需要删除.bg类）
$ b

HTML

 < div class =header bg> 
< div id =menu> 
< ul> 
< li>< a href =＃>菜单< / a> 
< ul> 
< li>< a href =＃>子菜单1< / a>< / li> 
< li>< a href =＃>子菜单2< / a>< / li> 
< li>< a href =＃>子菜单3< / a>< / li> 
< li>< a href =＃>子菜单4< / a>< / li> 
< li>< a href =＃>子菜单5< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< / div> 
  

CSS

  .header {position：fixed; top：0px; right：0px; left：0px; z-index：10; height：110px;} 
 .bg {background-image：-moz-linear-渐变（顶部，＃CCCCCC，＃888888）; 
 background-image：-webkit-gradient（线性，左上，左下，从（#CCCCCC）到（＃888888））; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃CCCCCC，endColorstr =＃888888）; 
 -ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃CCCCCC，endColorstr =＃888888）; 
} 
 
 #menu {width：960px; z-index：20; position：relative; height：40px;} 
 #menu ul {
 margin：0 ; 
 padding：0; 
 list-style-type：none; 
 text-align：center; 
} 
 #menu li {
 background：＃009966; 
 float：left; 
 padding：0; 
 margin-right：1px; 
} 
 #menu li a {
 font-size：16px; display：block; width：191px; line-height：40px; color：#FFF; text-decoration：none; 
} 
 #menu li：hover {background：＃FF6600;} 
 #menu ul li ul {display：none;} 
 #menu ul li：hover ul {display： block;} 
 #menu li：hover ul li {float：none; margin：0; padding-bottom：0px;} 
 #menu li ul li a {text-align：left; text-indent ：10px; font-size：12px; background：none; color：＃000;} 
 #menu li ul li a：hover {} 
  

任何人都可以帮助我如何让它与IE一起工作吗？

解决方案

没有人找到解决方案？ ; - ）

这个问题是通过使用z-index属性。

这很疯狂，但IE在这种情况下，我不喜欢它，我不知道为什么，如果有人可以找到一个很好的理由，让我知道...

使用渐变并且不使用z-index的演示。

换行

  .header {position：fixed; width：100％; left：0px; height： 110px;} 
  

Another problem with IE when trying to display a css:hover menu with <ul> and <li> while using a gradient background on the container of the menu.

The hover li is truncated while using a gradient bg and displays correctly without the gradient bg.

It works fine with Chrome and FF...

Demo with gradient

Demo without gradient

Source with gradient (without you just have to delete the .bg class)

HTML

<div class="header bg">
<div id="menu">
    <ul>
       <li><a href="#">Menu</a>
            <ul>
               <li><a href="#">Sub-menu 1</a></li>
               <li><a href="#">Sub-menu 2</a></li>
               <li><a href="#">Sub-menu 3</a></li>
               <li><a href="#">Sub-menu 4</a></li>                
               <li><a href="#">Sub-menu 5</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

CSS

.header {position:fixed;top:0px;right:0px;left:0px;z-index:10;height:110px;}
.bg {background-image: -moz-linear-gradient(top, #CCCCCC, #888888);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#888888));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);    
}

#menu {width:960px;z-index:20;position:relative;height:40px;}
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
background:#009966;
 float:left;
 padding:0;
 margin-right:1px;
}
#menu li a {
font-size:16px;display:block;width:191px;line-height:40px;color:#FFF;text-decoration:none;
 }
#menu li:hover{background:#FF6600;}
#menu ul li ul {display:none;}
#menu ul li:hover ul {display:block;}
#menu li:hover ul li {float:none;margin:0;padding-bottom:0px;}
#menu li ul li a  {text-align:left;text-indent:10px;font-size:12px;background:none;color:#000;}
#menu li ul li a:hover {}

Anyone could help me on how to make it work with IE please ?

解决方案

No one found the solution ? ;-)

The issue was made by using the z-index property.

It's crazy, but IE doesn't like it in this case, I don't know why, if anyone could find a good reason, let me know...

Demo with gradient and without the z-index.

The line changed

.header {position:fixed;width:100%;left:0px;height:110px;}

这篇关于Z-index或溢出问题，在css菜单上，IE 9中有渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！