【问题标题】:Dropdown menu "blinking" in IE6IE6中的下拉菜单“闪烁”
【发布时间】:2012-12-28 09:51:09
【问题描述】:

我正在尝试创建一个基于 Stu Nicholls 的下拉菜单:http://www.cssplay.co.uk/menus/pro_drop8.html

我需要遍历 Select 下拉菜单并符合 IE6/7,所以这就是我使用所有这些 iFrame 废话的原因。更改 z-index 不会修复它,因为 IE 设置了一个无限的 zindex 值来选择下拉菜单。

所以我的问题是,如果我将下拉菜单从网站复制并粘贴到我的应用程序中(字面意思是,没有进行任何更改),它将在除 IE6 之外的所有内容中正常工作,它会“闪烁”。这意味着每次您将鼠标悬停在不同的菜单条目上时,它都会消失一小会儿,然后再次出现。我认为这是因为 IE6 认为您实际上不再悬停在菜单上。

我尝试了所有方法并在谷歌上浏览了几个小时,但没有找到有效的下拉菜单。你知道什么可能导致这个问题(以及如何解决它)吗?

谢谢-

【问题讨论】:

    标签: html css internet-explorer-6


    【解决方案1】:

    有时 IE 的haslayout 属性会出现问题。一个快速简单的解决方法是设置:

    height: 1%;
    

    【讨论】:

    • 我应该在什么元素上设置它?他们全部 ?这也不会破坏我已经具有高度值的元素的布局吗?谢谢
    • 具有高度值的元素确实具有布局,因此,其他元素(我不确定您的标记,所以我无法具体说明)可能没有定义样式属性的布局。这些是你需要寻找的
    • 谢谢!唉,我尝试为菜单中没有高度的所有元素设置它,但它不起作用
    【解决方案2】:

    我讨厌成为建议您使用其他东西的“那个人”,所以如果您打算使用 Nicholls 的代码,请不要尝试这样做。但是,如果您没有在 Stu Nicholls 的下拉菜单中出售,您可以查看 YUI's menus。我特别提到这些是因为我在 iframe-to-fix-ie6-bugs 支持方面取得了巨大成功。 (至少,您可以使用他们的示例代码来查看 IE6 是否与其他人的下拉菜单表现得很好,或者它是否只是与 Nicholls 的某些东西。)

    【讨论】:

    • 好吧,它不起作用,所以我不妨尝试其他方法。我马上去看看。
    • 还有一些其他菜单在 IE6/7/8 和所有其他主流浏览器(是的,甚至 Opera)中运行良好,Steve 提供了可用于完全基于 CSS 的菜单的代码在 grc.com 上,我使用了一个很好的基于 JS 的,我现在找不到原始链接。
    • Stu 的东西并没有给我留下深刻印象。我认为网站名称概括了“CSS Play”。他的工作似乎专注于你可以用 css 做的事情,而不是你应该的事情。
    【解决方案3】:

    我不知道这是否是您所需要的,但jQuery bgiframe plugin 可以非常干净地处理选择问题,因此您不必手动执行所有操作。

    希望对您有所帮助。

    【讨论】:

    • 这很奇怪,你用的是原生 IE6 还是什么模拟器?
    【解决方案4】:

    好的,我找到了解决问题的方法。我正在使用 Chrome 下拉菜单:http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

    代码简单、漂亮且运行良好。我很难自定义它,但现在它完成了,我的生活好多了:

    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    </ul>
    </div>
    
    <!--1st drop down menu --> 
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    </div>
    
    
    <!--2nd drop down menu --> 
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    </div>
    
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
    

    【讨论】:

      【解决方案5】:

      IE 使用与其他浏览器不同的事件触发器。尝试对鼠标执行此操作:

              //browser sniff
              if (navigator.appName == "Microsoft Internet Explorer") {
                  document.getElementById('yourtriggerid').onmouseleave = function() {
                      document.getElementById('themenuid').style.display = "none";
                  };
              } else {
                  document.getElementById('yourtriggerid').onmouseout = function() {
                      document.getElementById('themenuid').style.display = "none";
                  };
              }
      

      'yourtriggerid' 是你想要触发事件的任何东西,然后'themenuid' 是你想要隐藏和显示的菜单/绝对定位的 div。

      键是onmouseleave 触发IE事件。希望这对某人有帮助!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2012-12-15
        • 1970-01-01
        • 1970-01-01
        • 2011-02-01
        • 2015-10-12
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多