IE 9 中带有渐变背景的 CSS 菜单上的 Z 索引或溢出问题

Posted 2023-03-06

【中文标题】IE 9 中带有渐变背景的 CSS 菜单上的 Z 索引或溢出问题

【英文标题】：Z-index or overflow issue, on a css menu, with gradient background in IE 9

【发布时间】：2012-11-26 15:17:20

【问题描述】：

当在菜单容器上使用渐变背景时，尝试显示带有<ul> 和<li> 的css:hover 菜单时，IE 会出现另一个问题。

悬停 li 在使用渐变背景时被截断，并且在没有渐变背景的情况下正确显示。

它适用于 Chrome 和 FF...

Demo with gradient

Demo without gradient

带有渐变的源（无需删除 .bg 类）

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:hoverbackground:#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 一起工作？

【问题讨论】：

对不起... Internet Explorer 9

头部需要修复吗？

是的，它需要修复，但没关系，修复或绝对问题是一样的 :-(

实际上，如果我从标题中删除固定位置，问题就会消失。

不适合我...但无论如何标题必须是固定位置。

【参考方案1】：

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

问题是通过使用 z-index 属性产生的。

这很疯狂，但是IE不喜欢这种情况，我不知道为什么，如果有人能找到好的理由，请告诉我......

Demo with gradient and without the z-index.

换行

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

【讨论】：

哈！刚刚发现并打算发布:)但我不知道为什么。此外，将菜单上的position: relative 更改为position:fixed 会显示菜单，但您不能选择标题之外的菜单项。可能是同一个问题...

这个我快疯了！因为我需要固定的位置。当您需要使它们与每个浏览器一起工作时，一切都变得如此复杂。当你也为手机制作它们时，它会更复杂！ position:fixed 不适用于例如 iPhone 和 iPad...