IE8: Div hover работает только при заданном цвете фона, очень странно, почему? - PullRequest
Новая
       21

IE8: Div hover работает только при заданном цвете фона, очень странно, почему?

11 голосов
/ 22 октября 2010

Ситуация: Получил div с кнопками изображений. Див должен исчезнуть при наведении. Работает во всех браузерах, кроме Internet Explorer. Когда я даю div цвет фона, он неожиданно работает.

Проверка: http://ListAndPlay.com, вверху слева находятся элементы управления.

Наведение не будет работать в IE, попробуйте добавить цвет фона к кнопкам #, и оно неожиданно заработает.

Вопрос: В чем причина? Как это исправить правильно?

Ответы [ 8 ]

26 голосов
/ 01 мая 2011

Я недавно тоже столкнулся с этой проблемой.Я также решил эту проблему, добавив прозрачное фоновое изображение размером 1 на 1 пиксель к элементу наведения.После этого мне хотелось принять душ.

10 голосов
/ 30 мая 2011

У меня была эта проблема только сегодня, когда при наведении указывал на оверлей div transparent.IE9 не будет активировать наведение, пока мышь не будет над текстовым содержимым наложения.Отлично работал на Chrome и FF4.Я не пробовал обходной путь с прозрачным изображением, но, похоже, он работал нормально: rgba(0,0,0,0).Weird ...

5 голосов
/ 22 ноября 2012

Мое решение состоит в том, чтобы установить цвет фона для элемента, который нужно навести, а затем использовать свойство CSS opacity, чтобы скрыть его. Для IE предусмотрен запасной вариант в виде фильтра. 

.element {
  background-color: #fff;
  opacity: 0;
  filter: alpha(opacity=1);
}

Это решение не требует прозрачного PNG и, в отличие от решения rgba, оно работает в более старых версиях IE.

2 голосов
/ 21 марта 2014

У меня та же проблема с IE8, использующим HTML5. Мое решение было вдохновлено Германом. Я устанавливаю фоновое изображение, а затем создаю фон из несуществующей его части. По сути, я прошу браузер отобразить что-то за пределами изображения. 

background: url(myimage.png) 300px 0px no-repeat;

Чтобы избежать ненужного трафика, это может быть спрайт сайта или любое другое допустимое изображение, которое уже используется на странице.

2 голосов
/ 17 ноября 2012

Я столкнулся с той же проблемой.Мне показалось, что проблема связана с использованием элементов html5 (например, <footer> и header) в ie8, и забыл использовать html5shiv для добавления поддержки этих элементов для старых браузеров.

В этом случае добавление html5shiv решило проблему.Ни одно из других предложенных решений не имело никакого эффекта.

2 голосов
/ 01 мая 2011

Это связано с макетом.Использование позиции: относительный даст тот же результат без использования нежелательного фонового изображения.

1 голос
/ 29 марта 2011

Даже с последней версией IE9 у меня такая же проблема. Как предложил MeProtozoan , добавление прозрачного фонового изображения к якорям приводит к тому, что поведение работает так, как требуется, но черт грязно.

0 голосов
/ 22 августа 2013

У меня была похожая проблема с hover в div, не работающим в IE8 и меняющим мой тип документа на 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

исправил.

Подробнее здесь

...