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

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

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

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

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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

У меня была аналогичная проблема с зависанием в div, не работающем в IE8, и изменением моего doctype на

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

зафиксировал его.

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