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

我对Internet Explorer 9有一个奇怪的问题。使用的CSS过滤器渐变会切断我的子菜单。例如，这里有一个例子。下面是一个简单的代码：

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 -->

如果我从我的

#头套

中删除过滤器渐变，我的菜单将按预期工作。随着梯度在那里，我只能看到边界，它切断了任何超过头部实际高度

为什么会这样

我如何着手修理它 我已经通过IE模拟器对它进行了测试，它在两个方面都出现了问题，所以看起来这不仅仅是一个模拟器问题（或者浏览器快照使用模拟器，只是向我展示了我已经知道的东西）。我已经玩了一个小时了，除非我完全移除梯度或者移除固定的/z-指数，否则就没有机会修复它。我也不想这样做。

您可以将具有此背景的div与包含链接的标记分开。以下是我更详细的意思：

不应是所有文本的父级，因为在使用internet explorer中的过滤器后，它将限制文本的高度。（这似乎是一个常见问题，它迫使溢出被隐藏）

因此，只需将

作为标题标签的同级标签，并使headWrapper和header具有固定位置：

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

下面是html的外观（查看我的评论）：

替代解决方案：

将渐变效果作为背景图像并水平重复。

---

从

中删除#headWrapper中的z-索引即可演示

#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 );
}

你可以在这里查一下

在ie 9上检查此问题

---

我建议也使用一个单独的元素，但不要让它成为实际容器的同级元素，而是它的子元素：

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

剩下的一切都在告诉内容要高于背景，这样：

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

这就是它的样子：

通过使用伪元素而不是实际元素，我们可以使它变得更好，语义更正确，但不幸的是

---

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

---

考虑到边界没有被裁剪的事实，因此它可能只是一个bug或某种bag算法块。

是的，但是删除Z索引可能会使东西定位在标题上，因为标题是固定的。或者你可以使用梯度背景图像作为#headWrapper，这在所有浏览器中都适用

#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 );
}

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

#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;
    ...
}