Эффект мыши над не работает в IE - PullRequest
0 голосов
/ 05 апреля 2011

Мой код:

<td width="70" height="60">
    <a href="images/Gallery1/6.jpg" rel="lightbox" title="my title" >
        <img src="images/Gallery1/thumbs/6.jpg"  width="65" height="40" border="0" class="gallery-img">
    </a>
</td>

И CSS:

.gallery-img{
    border:4px solid #FFFFFF;
}
.gallery-img:hover{
    border:4px solid #D4D5D8;
}

Приведенный выше код работает нормально с использованием Firefox, но не при использовании IE 8. Как я могу это исправить?

Ответы [ 5 ]

2 голосов
/ 05 апреля 2011

Это будет работать в IE8, если вы находитесь в режиме Стандарты .

Это не будет работать, если вы находитесь в режиме Причуды :

  • :hover не работает для не a элементов в IE6 и IE7 / 8 в режиме Quirks .

Тот факт, что вы используете таблицы для разметки, подсказывает мне, что из всех возможных причин, находящихся в режиме «Причуды», ответ здесь.

Прочитайте эту длинную и подробную статью:

http://hsivonen.iki.fi/doctype/

Короче говоря, вы должны убедиться, что в качестве первой строки вашего HTML-кода указан правильный тип документа, например:

<!DOCTYPE html>

Вы можете проверить, что я говорю, открыврассматриваемая страница в IE, и нажмите F12, чтобы открыть Инструменты разработчика.Если для «Режима документа» написано «Режим причуд», ваш фрагмент CSS никогда не будет работать.После добавления типа документа должно появиться «Стандарты IE8», и все должно работать.

Если это по-прежнему не работает, у вас есть некоторые другие проблемы, препятствующие использованию IE в режиме стандартов.

1 голос
/ 05 апреля 2011

В какой версии IE вы это тестируете?

Ранние (версии 6) версии IE ONLY поддерживали селектор наведения на элементах a (ссылка) и ничего больше.Более новые версии должны поддерживать это, но у меня нет личного опыта, чтобы доказать это.

О IE6 было написано следующее: http://www.howtocreate.co.uk/wrongWithIE/?chapter=%3Ahover

1 голос
/ 05 апреля 2011

Попробуйте удалить border="0" из тега img HTML.

0 голосов
/ 05 апреля 2011

Проверьте это:

a .gallery-img{
    border:4px solid #FFFFFF;
}
a:hover .gallery-img{
    border:4px solid #D4D5D8;
}

Я думаю, что это будет работать. спасибо

0 голосов
/ 05 апреля 2011

у меня работает. Я пробовал это в Chrome, IE 8 и 9:

http://jsfiddle.net/EmmrW/1/

даже с вашим обновленным кодом, он все еще работает:

http://jsfiddle.net/EmmrW/2/

но это правда - попробуйте переместить все атрибуты width и height, border в CSS - вот где они принадлежат.

Кроме того, у вас могут быть другие определения, какой-либо специфичный для IE файл CSS или правила? Проверьте это также.

...