Question

我对Internet Explorer 9有一个奇怪的问题。使用的CSS Filter Gradient切断了我的子菜单。例如，这里是JSFiddle。下面是一个简单的代码：

HTML

<div id="headWrapper">
    <header>
        <nav id="main">
            <ul>
                <li>
                    <a href="javascript:void(0);">Parent Navigation Item</a>
                    <ul class="submenu">
                        <li><a href="javascript:void(0);">Child Nav Item 1</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 2</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 3</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 4</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 5</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 6</a></li>
                    </ul>
                </li>
            </ul>           
        </nav><!-- main -->
    </header>
</div><!-- headWrapper -->

CSS

*{margin: 0; padding: 0;}
header, nav     {display: block;}
#headWrapper    {border-bottom: 1px solid #eee; position: relative; z-index: 5; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0 );}
header          {width: 1000px; height: 75px; margin: 0 auto; clear: both;}

#main                   {float: left;}
#main ul                {list-style: none;}
#main li                {float: left;}
#main a                 {display: block;}
#main li ul.submenu         {display: block; padding: 4px; border: 1px solid #000; position: absolute; z-index: 999; border: 1px solid #ddd; margin-left: 12px; border-top: 0; background-color: beige; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;}
#main li ul.submenu li      {float: none; display: block;}

如果我从#headWrapper移除过滤器渐变，我的菜单按预期工作。有了渐变，我只能看到边框，它会切断标题实际高度以外的任何内容。

为什么会这样？
我该如何修复它？

我已经通过IE仿真和Browser Shots对它进行了测试，并且它在两者中均显示已损坏，因此它似乎不仅仅是模拟器问题（或者浏览器镜头正在使用模拟器而且只是告诉我我已经知道的事情。我已经玩了一个小时并没有运气修复它，除非我完全删除渐变或删除固定的/ z索引，我也不想这样做。

Answer 1

Live demo

您可以将具有此背景的div与将保存链接的标记分开。这是我在更多细节中的意思：

<div id="headWrapper">不应该是所有文本的父级，因为在使用Internet Explorer中的过滤器后，它会限制它的高度。（这似乎是一个常见的问题，它会强制隐藏溢出。）

因此，只需将<div id="headWrapper"></div>作为标题标记的兄弟，并使headWrapper和标题具有固定位置：

#headWrapper {... position: fixed; ...}
header {... position: fixed; ...}

以及html的外观（查看我的评论）：

<div>
    <div id="headWrapper"></div>
    <!--Notice the headWrapper and header are siblings-->
    <header>
        <nav id="main">
            <ul>
                <li>
                    <a href="javascript:void(0);">Parent Navigation Item</a>
                    <ul class="submenu">
                        <li><a href="javascript:void(0);">Child Nav Item 1</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 2</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 3</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 4</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 5</a></li>
                        <li><a href="javascript:void(0);">Child Nav Item 6</a></li>
                    </ul>
                </li>
            </ul>           
        </nav><!-- main -->
    </header>
</div>

请注意，我还对您的CSS进行了一些随机改进：

*{margin: 0; padding: 0;}
body {height: 1000px;}

#headWrapper    {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0 );
    border-bottom: 1px solid #eee; 
    position: fixed;
    height:75px;
    width:100%;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

header { width: 100%; position:fixed; }

#main {float:left;}
#main ul li a { float:left; width:100%; }
#main li ul.submenu {
    float:left;
    list-style:none;
    padding: 4px;
    border: 1px solid #ddd; 
    margin-left: 12px; 
    border-top: 0; 
    background-color: beige;
    -webkit-border-radius: 0 0 8px 8px; 
    -moz-border-radius: 0 0 8px 8px; 
    border-radius: 0 0 8px 8px;
}

替代解决方案：

将渐变效果设为背景图像并水平重复。
来自w3Schools

的演示

Answer 2

通过从#headWrapper中删除z-index，它将起作用

#headWrapper {
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    left: 0;
    /*z-index: 5;*/
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0 );
}

你可以在这里查看Full Screen JS Fiddle

JS Fiddle

在ie 9

上查看此问题

Z-index or overflow issue, on a css menu, with gradient background in IE 9

Answer 3

我建议使用一个单独的元素，但不要让它不是实际容器的兄弟，而是它的子元素：

<div id="headWrapper">
    <div id="headerDummy"></div>
    <header>
        ...
    </header>
</div>

#headerDummy将作为渐变持有者播放，我们可以将其拉伸以填充整个父级：

#headerDummy{

    /* The bacgkground-serving el will not interfere the normal flow, ... */
    position:absolute;

    /* ... it will have exactly the same size, as the container (you can make it taller or wider and don't have to change the #headerDummy style), ... */
    top:0;              
    left:0;
    display:block;
    width:100%;
    height:100%;

    /* ... be BEHIND the actual content... */
    z-index:1;

    /* ... and still have our gradient. */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endC
olorstr='#e1eaf0',GradientType=0 );
}

剩下的一切就是告诉内容高于背景，那样：

header{
    position:relativer;
    z-index:10;
    ...
}

它的外观如下：http://jsfiddle.net/16qchfc6/22/

通过使用伪元素而不是实际元素，我们可以使它更好，更语义更正，但不幸的是IE seems not to apply filter for pseudo-elelemnts

顺便说一句，Win7上实际的实时IE9显示如下菜单：

enter image description here

考虑到边界没有被裁剪的事实，所以它可能只是一个小虫或某种袋子algorythm piece。

Internet Explorer 9 Gradient Filter关闭子菜单

3 个答案: