проблема маржи в IE7 с эффектом наведения jQuery на абсолютную позицию - PullRequest
0 голосов
/ 10 июля 2010

Наличие абсолютной позиции на .nav li p создает дополнительное поле при наведении на изображение только в IE7, но без абсолютной позиции изображения мерцают.

Есть ли другой вариант, кроме абсолютного позиционирования?

Вот что у меня есть:

$('ul.nav li').hover(function() {
  $(this).prepend('<p></p>')
         .find('p')
         .fadeIn('fast');
}, function() {
  $(this).find('p')
         .fadeOut('fast', function() {
            $(this).remove()
         });
});

CSS:

.nav li{
    width:360px;
}
.nav li p {
    width:360px;
    margin: 0;
    padding:0;
    position: absolute;
    display:none;
}
li#stylea {height:138px;background: url(images/1.jpg) 0 -474px no-repeat}
li#stylea p {height:138px;background: url(images/1.jpg) 0 bottom no-repeat;}
li#styleb { height:149px; background: url(images/1.jpg) 0 -176px no-repeat}
li#styleb p {height:149px;background: url(images/1.jpg) 0 -325px no-repeat;}

HTML:

<div>
   <ul class="nav">
      <li id="stylec"></li>
      <li id="styleb"></li>   
      <li id="stylea"></li>   
   </ul>
   <ul class="nav">
      <li id="styled"></li>   
      <li id="stylee"></li>   
      <li id="stylef"></li>                       
   </ul>
</div>

1 Ответ

0 голосов
/ 10 июля 2010

Первое, что я попробую, всегда добавляю zoom: 1 к элементу (ам).иногда родитель .. иногда ребенок.зум: 1 случается, чтобы поставить IE7 в линию много.

вы будете удивлены, сколько раз это работает.

...