IE8：奇怪的 jQuery 显示元素问题，不管方法（幻灯片、显示、淡入淡出）

Question

这是微软的另一个奇怪的好奇心。在 IE8 中，当我尝试显示特定元素时，无论使用何种方法（幻灯片、显示、淡入淡出），它都不会显示......但确实存在。因此，如果您在 IE8 中转到 http://www.stratfor.com 并将鼠标悬停在下拉主菜单链接上，您会注意到一个小边框直接出现在作为下拉列表一部分的元素下方，但不会显示整个内容。现在向下移动鼠标，您会注意到链接在那里并且可点击，您只是看不到它们。当你点击一个链接时，在页面重新加载之前，下拉菜单会出现。

这与这些元素的设置方式有关，因为在网站的其他区域，不存在这个问题。我尝试了从悬停到绑定的不同 jQuery 方法。当页面加载并正确显示时，我已将下拉菜单设置为一个块。我已将下拉菜单设置为一个块，在页面加载后使用 jQuery 将其隐藏，并且行为仍然存在。

下面是我正在使用的代码：

(function ($) {
  // Initialize the main menu dropdowns.
  Drupal.behaviors.mainMenu = {
    attach: function (context, settings) {
      $('#block-system-main-menu .site-menu li', context).hover(
        function() {
          $(this).addClass('is-active');
          if ( $('.site-submenu', this).length ) {
            $('.site-submenu', this).slideDown('fast');
          }
        }, function() {
          $(this).removeClass('is-active');
          if ( $('.site-submenu', this ).length && $('.site-submenu', this).is(':visible')) {
            $('.site-submenu', this).hide();
          }
        });
      }
    };
  }
})(jQuery);

也检查一下 CSS，也许我那里有一些东西是关闭的。

这个让我发疯。任何帮助将不胜感激！

更新：我尝试将下拉菜单放在顶部而不是菜单下方，这似乎有所帮助。下拉框的父元素似乎隐藏（排序，因为您仍然可以单击链接）下拉框一旦通过它的容器。

更新：当下拉菜单设置为默认显示时，会按预期显示。然后隐藏它，并基于悬停显示它再次导致问题。我还检查并重新检查了父元素的定位和 z-index。这是一个奇怪的问题，因为它适用于 IE7 以及我发现的除 IE8 之外的所有其他浏览器和版本。

Answer 1

这里是 IE 8 中的屏幕截图：（工作正常）