Internet Explorer 9 渐变过滤器切断子菜单

Question

我在使用 Internet Explorer 9 时遇到了一个奇怪的问题。使用的 CSS 过滤器渐变会切断我的子菜单。例如，这里是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 中删除过滤器渐变，我的菜单会按预期工作。有了渐变，我只能查看边框，它会切断任何超过标题实际高度的东西。

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

我已经通过 IE Emulated 和 Browser Shots 对其进行了测试，它在两者中都出现了故障，所以看起来这不仅仅是一个模拟器问题（或者 Browser Shots 正在使用一个模拟器，只是向我展示了我已经知道的内容）。我已经玩了一个小时并且没有运气修复它，除非我完全删除渐变或删除我也不想做的固定 / z-index。

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显示菜单是这样的：

考虑到边界没有被裁剪，所以它可能只是一个错误或某种包算法。