IE7: не удается отобразить всплывающее окно при наведении на прозрачный фон

Question

Это, наверное, одна из самых странных вещей, которые я видел ... У меня есть список элементов, каждый из которых содержит изображение значка и скрытое всплывающее окно. Когда пользователь наводит курсор на значок, всплывающее окно отображается выше (наведение jQuery). Это прекрасно работает во всех браузерах и IE8 / 9, но 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'});
      }
   );

ТИА !!!

Answer 1

Создайте прозрачный квадратный пиксель размером 1 пиксель и используйте его в качестве фона для элементов.

Answer 2

Просто что-нибудь попробуйте:

Установите цвет фона правила css: прозрачный

на div, который содержит пробел (я думаю, это будет .popup-container).