Странное поведение фонов li при наведении курсора в Internet Explorer (IE) - PullRequest
0 голосов
/ 15 июля 2010

Итак, у меня есть простая подача изображений flickr на http://cure.org/ чуть выше нижнего колонтитула.Фид содержится в относительно позиционированном div, с ul внутри и li, которые содержат <a> и <img> внутри.Img абсолютно расположен внутри относительно расположенного li, а li имеет фон для создания эффекта рамки фотографии.

Проблема, с которой я сталкиваюсь, заключается в том, что существует стиль: hover, поэтому при наведении курсораизображения сдвигаются на несколько пикселей вверх, а в браузерах webkit и firefox они также поворачиваются на пару градусов.Все хорошо в Chrome, Safari и Firefox.Но в Internet Exploiter я получаю странную сделку, когда при наведении курсора на одно изображение фоны всех предыдущих изображений в поплавке также сдвигаются вверх, но не после.Это действительно странно, и я не могу понять, почему это происходит, или как решить.

Есть какие-нибудь советы?Вы можете использовать ссылку выше для просмотра живой страницы или увидеть выдержки из кода ниже:

разметка ...

<div id="mediaFeedImgs">

<ul>

    <li class="mediaImg">
        <a href="#" title="Makau Nzisa"><img src="http://farm5.static.flickr.com/4060/4385817766_d0e0f076a6_s.jpg" alt="Makau Nzisa" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="passion2010IMG_2456"><img src="http://farm5.static.flickr.com/4011/4266257860_909860cab5_s.jpg" alt="passion2010IMG_2456" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="IMG_1616"><img src="http://farm3.static.flickr.com/2636/4113313926_0f11062dd5_s.jpg" alt="IMG_1616" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Mbinya Nzive"><img src="http://farm5.static.flickr.com/4013/4387741405_ce7889e71b_s.jpg" alt="Mbinya Nzive" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="James Kariuki"><img src="http://farm5.static.flickr.com/4036/4385054803_cee8954f02_s.jpg" alt="James Kariuki" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="phpValev8"><img src="http://farm5.static.flickr.com/4004/4648263242_f664121517_s.jpg" alt="phpValev8" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Zenebu_0015"><img src="http://farm5.static.flickr.com/4021/4440138241_b81e7bc517_s.jpg" alt="Zenebu_0015" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Oslin_8589"><img src="http://farm5.static.flickr.com/4058/4425042835_42945a39fa_s.jpg" alt="Oslin_8589" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Jose_7722"><img src="http://farm3.static.flickr.com/2693/4422684429_d497172e91_s.jpg" alt="Jose_7722" width="75" height="75" /></a>
    </li>

</ul>

CSS ...

#mediaFeedImgs {
  position:absolute;
  top:60px;
  left:10px;
}

#mediaFeedImgs li {
  float:left;
  margin-right:16px;
}

.mediaImg {
  display:block;
  width:89px;
  height:90px;
  background:url(/img/media/photo-bg-75px.png) no-repeat left top;
  position:relative;
  z-index:1;
}

.mediaImg:hover {
  margin-top:-3px;
  padding-bottom:3px;
  height: 87px;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
}

.mediaImg img {
  position:absolute;
  top:5px;
  left:7px;
}

1 Ответ

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

Я подозреваю, что это потому, что вы добавляете padding для смены.Я проверил, установив для него значение position: relative, а затем при наведении измените его на top: -3px, и это, похоже, решило вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...