Superfish 在 IE 6-9 中不起作用答案

【问题标题】：Superfish not working in IE 6-9Superfish 在 IE 6-9 中不起作用
【发布时间】：2014-09-13 13:00:25
【问题描述】：

我有一个使用 Superfish 菜单的 WordPress 网站。该菜单在 Chrome、Firefox 和 IE 10-11 中运行良好，但在 IE 6-9 中不显示子菜单。 IE 9 中的子菜单似乎是“透明的”。我在 Google 上搜索过解决方案，但它们似乎都不起作用。

我尝试过的方法：

删除过滤器（找不到任何过滤器）
z-index: 9999999 在子菜单上
z-index: -1 重叠元素
visibility: visible; overflow: visible; opacity: 1 在子菜单上
已添加<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
已更新至最新版本的 Superfish

这是我在 style.css 中被 superfish.css 覆盖的内容：

.menu-main-container {
    background: #60ac5f; /* Old browsers */
    background: -moz-linear-gradient(top, #60ac5f 0%, #3a7539 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60ac5f), color-stop(100%,#3a7539)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* IE10+ */
    background: linear-gradient(to bottom, #60ac5f 0%,#3a7539 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60ac5f', endColorstr='#3a7539',GradientType=0 ); /* IE6-9 */
    position: fixed !important;
    top: auto !important;
    z-index: 151 !important;
}

#menu-main {
    position: relative;
}

#menu-main li {
    background: transparent !important;
}

#menu-main li a {
    font-size: 17px;
    font-weight: 400 !important;
    font-family: "Open Sans";
    border: none;
    padding: 0.46em 1em;
}

#menu-main a:focus, #menu-main a:hover, #menu-main a:active, #menu-main .current_page_item, #menu-main li:hover, #menu-main li.sfHover {
    outline:        0;
    background: none repeat scroll 0 0 #E79E38 !important;
}

#menu-main li:hover ul, .menu li.sfHover ul {
    top: 43px !important;
}

#menu-main ul {
    z-index:999 !important;
}

#menu-main li ul li a{
    font-size: 15px !important;
}

#menu-main li li {
      background: none repeat scroll 0 0 #E79E38 !important;
      border-bottom: 1px solid #BF711C !important;
}

#menu-main li ul li a:hover {
    background: none repeat scroll 0 0 #DC8122 !important;
}

网站：tinyurl.com/oyxgnmk.

【问题讨论】：

副手，你所有的 ie only 样式和脚本都在页面的顶部，所以它们首先被阅读，然后被常规的覆盖
superfish.css 覆盖 style.css。看上面添加的代码。

标签： jquery css internet-explorer z-index superfish

【解决方案1】：

好的，我找到了解决方法。问题出在.menu-main-container 类的过滤器上。

.menu-main-container {
    background: #60ac5f; /* Old browsers */
    background: -moz-linear-gradient(top, #60ac5f 0%, #3a7539 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60ac5f), color-stop(100%,#3a7539)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* IE10+ */
    background: linear-gradient(to bottom, #60ac5f 0%,#3a7539 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60ac5f', endColorstr='#3a7539',GradientType=0 ); /* IE6-9 */
    position: fixed !important;
    top: auto !important;
    z-index: 151 !important;
}

新代码：

.menu-main-container {
    background: #60ac5f; /* Old browsers */
    background: -moz-linear-gradient(top, #60ac5f 0%, #3a7539 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60ac5f), color-stop(100%,#3a7539)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* IE10+ */
    background: linear-gradient(to bottom, #60ac5f 0%,#3a7539 100%); /* W3C */
    position: fixed !important;
    top: auto !important;
    z-index: 151 !important;
}

【讨论】：