IE7：徘徊在透明背景

这可能是我见过的最奇怪的事情之一，当无法显示弹出框...我有元素的列表，每个包含图标图像和隐藏弹出框。当用户将鼠标悬停在图标上时，弹出框显示在上方（jQuery的悬停）。这适用于所有浏览器和IE8/9，但IE7有问题。图标和弹出框之间存在“间隙”。如果我设置了背景颜色并且弹出框的容器正在触摸图标行，我可以在用户通过移动鼠标进行选择时使弹出框显示在屏幕上。IE7：徘徊在透明背景

不过，我不希望显示的背景色，而当它不是，当用户在任何地方的差距他们的移动鼠标在弹出框就会消失。换句话说，弹出窗口显示在正确的位置，但用户不能进行选择，因为没有在没有悬停在间隙上的情况下进入弹出窗口。

这里的一些HTML和CSS：

<div class="icon-nav"> 
    <ul> 
     <li> 
     <div class="popup-wrapper"> 
      <a href="#" class="replace air" rel="air">Air Quality</a> 
      <div class="popup-container"> 
       <div class="popup-content"></div> 
      </div> 
     </div> 
     </li> 
     <li> 
     <div class="popup-wrapper"> 
      <a href="#" class="replace health" rel="health">Public Health</a> 
      <div class="popup-container"> 
       <div class="popup-content"></div> 
      </div> 
     </div> 
     </li> 
     Etc.... 
    </ul> 
</div>

CSS：

.icon-nav { position: absolute; top: 388px; z-index: 999; width: 100%; } /* Positioned relative to a wrapper element. */ 
.icon-nav ul { display: block; width: 968px; margin: 0 auto; position: relative; } 
.icon-nav ul li { float: left; } 
.icon-nav ul li .popup-wrapper {} 
.icon-nav ul li .popup-container { position: absolute; bottom: 0px; padding-bottom: 35px; z-index: 9999; width: 100%; display:none; left: 0px; } 
.icon-nav ul li .popup-content { width: 900px; height: 260px; background-color: #fff; margin: 0 auto; padding:30px; } 
.icon-nav ul li a { width:121px; height: 115px; overflow: hidden; }

的jQuery：

$('.icon-nav li .popup-wrapper').hover(
     function(){ 
     $('a',this).addClass('hover') 
     var name = $('a', this).attr('rel'); 
     var popup = $('.popup-container', this); 
     $(popup).css({'display':'block'}); 
     // More Code... 
     },function(){ 
     $('a',this).removeClass('hover'); 
     $('.popup-container', this).css({'display':'none'}); 
     } 
    );

TIA！

来源

2011-05-13 csm232s

你可以创建你的代码的[jsFiddle测试用例]（http://jsfiddle.net/）吗？确保它展示了你在IE7中讨论的错误。 – thirtydot 2011-05-13 22:19:45

在这里做了一个 - http://jsfiddle.net/wvgcF/但不能让它正确运行基于给出的代码 – Lareau 2011-05-13 22:21:43

我做了一个显示我遇到的问题... http：// jsfiddle。净/ chris7519/rGJ4g/1/ – csm232s 2011-05-14 14:25:11

只是一个快速的一些尝试：

将CSS规则背景色：在包含间隙的DIV透明

（我想这会是.popup容器）。

来源

2011-05-13 22:37:11 James

是啊，这是奇怪的事情......我尝试过，但没有运气。只要背景中有颜色，它就可以工作。我从来没有见过这个问题。 – csm232s 2011-05-14 01:55:32

创建一个1pixel的方形透明PNG，并将其用作元素背景。

来源

2011-07-30 18:40:22 fxr

像一个迷人的作品，谢谢:-) – Jost 2013-07-18 14:58:05

IE7：徘徊在透明背景

回答

相关问题