CSS 下拉菜单在 IE 中缺少背景

Question

这可能是一个 z-index 问题，但我无法诊断出确切的问题。

查看问题请访问http://beta.pancreaticcanceraction.org/

将“preview2012”添加到该 URL 的末尾以访问该网站(我不想把整个链接都放下以防它被抓取)。

这是我遇到困难的顶部导航。它在 Firefox 和 Chrome 上运行良好，但现在在 IE9 中测试我发现只有一个子导航的外壳出现。边框内只有一个空白窗口。

我正在尝试各种各样的事情，但老实说，我的想法还很新鲜，需要更多的关注。

Answer 1

您会很高兴知道修复相对简单。只需从您的 nav 规则中删除 position:relative 和 z-index，如下所示。不幸的是，IE 不能很好地处理 position:relative 和 filter。

nav{
    background:#403a76;
    background:-moz-linear-gradient(top,#483a76 0,#594990 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#483a76),color-stop(100%,#594990));
    background:-webkit-linear-gradient(top,#483a76 0,#594990 100%);
    background:-o-linear-gradient(top,#483a76 0,#594990 100%);
    background:-ms-linear-gradient(top,#483a76 0,#594990 100%);
    background:linear-gradient(to bottom,#483a76 0,#594990 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#483a76',endColorstr='#594990',GradientType=0);
    border-bottom:1px solid #393363;
    box-shadow:0 1px 1px #615d8d;
    height:5rem;
    position:relative; /* delete this */
    margin-bottom:0;
    z-index:10 /* delete this */
}