Question

我在IE浏览器中只有一个下拉菜单存在问题，而且我的结果会因不同的版本而变化。

我在这里找到的导航：http://lt.philosophydesign.com/

它可以在Firefox / Safari / Chrome中正常显示。它在IE9和IE8中显示正常，但是当您尝试浏览下拉列表中的第一个项目时，下拉消失。在IE7和IE6中，下拉列表显示在主体内容之后。

奇怪的是，如果我在IE9和IE8中删除导航显示和功能<div id="content">的{{1}}内容。

这是导航CSS：

/* Navigation */
div#navcontainer {
    left:193px;
    position:absolute;
    top:108px;
    width:767px;
    z-index:1000;
}
div#navcontainer ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
}
div#navcontainer ul li {
    display:inline;
    float:left;
    margin-left:27px;
    position:relative;
}
div#navcontainer ul li a {
    color:#95006a;
    display:block;
    font-family:"LEWINRockwellExtraBoldRegular", "Arial Black", Gadget, sans-serif;
    font-size:14px;
    text-transform:uppercase;
    text-decoration:none;
}
div#navcontainer ul li.lightblue:hover a,
div#navcontainer ul li.lightblue.selected a,
div#navcontainer ul li.lightblue.sfHover a {
    color:#94CDF3;
}
div#navcontainer ul li.green:hover a,
div#navcontainer ul li.green.selected a,
div#navcontainer ul li.green.sfHover a {
    color:#71B9AE;
}
div#navcontainer ul li.limegreen:hover a,
div#navcontainer ul li.limegreen.selected a,
div#navcontainer ul li.limegreen.sfHover a {
    color:#BBD353;
}
div#navcontainer ul li.grey:hover a,
div#navcontainer ul li.grey.selected a,
div#navcontainer ul li.grey.sfHover a {
    color:#A8A9AC;
}
div#navcontainer ul li.darkblue:hover a,
div#navcontainer ul li.darkblue.selected a,
div#navcontainer ul li.darkblue.sfHover a {
    color:#1B2768;
}
div#navcontainer ul li.magenta:hover a,
div#navcontainer ul li.magenta.selected a,
div#navcontainer ul li.magenta.sfHover a {
    color:#CC2D88;
}
div#navcontainer ul li ul {
    position:absolute;
    top:-9999px;
    left:0;
    width:195px;
}
div#navcontainer ul li:hover ul, div#navcontainer ul li.sfHover ul{
    top:17px;
}
div#navcontainer ul li ul li {
    float:left;
    margin-left:0;
    width:195px;
}
div#navcontainer ul li ul li a {
    display:block;
    font-size:12px;
    margin-top:1px;
    padding: 2px 4px;
}
div#navcontainer ul li.lightblue ul li a {background:#94CDF3; color:#C9E6F9 !important;}
div#navcontainer ul li.green ul li a {background:#71B9AE; color:#C3DBD6 !important;}
div#navcontainer ul li.limegreen ul li a {background:#BBD353; color:#DFE9B0 !important;}
div#navcontainer ul li.grey ul li a {background:#A8A9AC; color:#D3D4D5 !important;}
div#navcontainer ul li.darkblue ul li a {background:#1B2768; color:#9092B0 !important;}
div#navcontainer ul li.magenta ul li a {background:#CC2D88; color:#D399C0 !important;}
div#navcontainer ul li.lightblue ul li a:hover,
div#navcontainer ul li.green ul li a:hover,
div#navcontainer ul li.limegreen ul li a:hover,
div#navcontainer ul li.grey ul li a:hover,
div#navcontainer ul li.darkblue ul li a:hover,
div#navcontainer ul li.magenta ul li a:hover {
    color:#fff !important;
}

这是导航HTML：

<div id="navcontainer">
  <ul id="mainnav" class="nav">
    <li class="magenta<?php echo $selected['home']; ?>"><a href="/">Home</a></li>
    <li class="lightblue<?php echo $selected['location']; ?>"><a href="/location">Location</a>
      <ul>
        <li><a href="/location/area/travel">Travel</a></li>
        <li><a href="/location/area/parks">Parks</a></li>
        <li><a href="/location/area/shops">Shops</a></li>
        <li><a href="/location/area/leisure">Leisure</a></li>
        <li><a href="/location/area/eatdrink">Eat &amp; Drink</a></li>
      </ul>
    </li>
    <li class="green<?php echo $selected['specification']; ?>"><a href="/specification">Specification</a>
      <ul>
        <li><a href="/specification/area/general">General</a></li>
        <li><a href="/specification/area/kitchen">Kitchen</a></li>
        <li><a href="/specification/area/bedroom">Bedroom</a></li>
        <li><a href="/specification/area/bathroom">Bathroom</a></li>
      </ul>
    </li>
    <li class="limegreen<?php echo $selected['plans']; ?>"><a href="/plans">Plans</a>
      <ul>
        <li><a href="/plans/area/1bed">1 Bedroom Apartments</a></li>
        <li><a href="/plans/area/2bed">2 Bedroom Apartments</a></li>
      </ul>
    </li>
    <li class="grey<?php echo $selected['gallery']; ?>"><a href="/gallery">Gallery</a>
      <ul>
        <li><a href="/gallery/area/gallery">View Gallery</a></li>
      </ul>
    </li>
    <li class="darkblue<?php echo $selected['about-us']; ?>"><a href="/about-us">About Us</a></li>
    <li class="magenta<?php echo $selected['contact-us']; ?>"><a href="/contact-us">Contact Us</a></li>
  </ul>
</div>

我有一些jQuery添加一个类来悬停LI作为IE7＆lt;不支持：将鼠标悬停在A标签以外的任何内容上。

$("div#navcontainer ul li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer ul li").mouseleave( function() { $(this).removeClass("sfHover"); } );

任何人都可以帮我弄清楚为什么这不适用于IE？

由于

斯科特

Answer 1

IE7的堆叠顺序与其他浏览器的工作方式不同。将z-index:2添加到#header，将z-index:1添加到#content。这将给你与IE8和9相同的结果。

这个结果是由li之间的空格引起的。如果移动速度足够快，可以选择较低的项目。我现在正在寻找解决方案。

修改

不是100％这适用于所有浏览器，但是你去了：通过向下拉列表ul添加背景颜色可以轻松解决该问题。我认为这是不可取的，所以你可以做的是添加1px xpp透明gif的背景（应该是一个小文件...），这将解决问题并保持审美

有点黑客但是IE就是那种浏览器！感到惊讶的是它在IE9中不起作用

希望有所帮助

修改

我认为IE6问题与你的javascript有关。尝试使用'＆gt;'在你的选择器中。这将获得元素的直接子元素（如下面的示例所示）。这样，当您鼠标移开其中一个下拉部分列表时，您的函数将不会触发。或者尝试这个代码（完全未经测试，绝对需要改进）：

$("div#navcontainer > ul > li").mouseenter( function() { $(this).addClass("sfHover"); } ); $("div#navcontainer > ul > li > ul").mouseleave( function() { $(this).parent().removeClass("sfHover"); } );

由于定位会从文档流中移除ul，这也可能导致它提前触发。

与sukerfish下拉菜单的Internet Explorer问题

1 个答案: