: зависание не работает должным образом в IE9

У меня есть простое раскрывающееся меню CSS с iframe внутри него. Когда я наводил указатель мыши на выпадающее меню, меню опускается. Но когда моя мышь зависает iframe внутри меню, меню возвращается. Вот упрощенная версия моего кода:

<div id="comments">
  <a href="#" class="btn">View comments</a>
  <div id="comment-wrap">
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
  </div>
</div>

<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>

Это работает в последних версиях FF, Chrome и Opera.

P.S. Выпадающее меню остается опустившимся, когда моя мышь накладывает наложение # комментария-обертки.

Ответ 1

У меня возникли аналогичные проблемы при работе с классом: hover psuedo. Он начал нормально работать, когда я изменил режим документа браузера на IE 9, а режим браузера также установлен на IE9. IE 9 имеет режим документа, установленный в IE8 по умолчанию.

Кроме того, вы можете добавить следующую метаинформацию в тег заголовка:

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

Надеюсь, что это поможет.

Ответ 2

У меня была такая же проблема, и я знаю, что это уже старая должность, но я чувствовал, что должен опубликовать мое решение. В основном IE не принимает событие :hover для любых тэгов, отличных от <a> с указанным href (не работает в ранних версиях), если вы не добавите <!DOCTYPE HTML> вверху. И это все! Проблема решена:).

Ответ 3

К сожалению, это, похоже, ошибка браузера, возвращая многие версии IE. Вы можете использовать JS-решение в качестве резервной копии для IE. Я создал пример jsFiddle, адаптировав код из другое решение решение этой проблемы.

Надеюсь, что это поможет!

Изменить: дальнейшее тестирование в IE9 показывает, что хотя отображение iframe отображается, зависание над полосами прокрутки скрывает его немедленно. Вероятно, для этого требуется более активное JS-решение, но оно зависит от вас, если вы хотите его реализовать.

Ответ 4

Недавно у меня была проблема с hover в IE10 (не уверен в более низких версиях), которая сводила меня с ума. Я правильно установил свой css hover, и это было для div, содержащего iframe. Проблема заключалась в том, что когда вы наводили div, он показывал iframe, но как только вы попытались переместить мышь в iframe, она снова исчезнет. Я искал везде и ничего не нашел для приемлемого ответа, кроме как использовать javascript или jquery. После нескольких дней попыток разобраться, я нашел очень простое решение, которое сработало для меня. Я просто удалил iframe из div и использовал объект, например

<div class='showme'>links<div style='float:left;' class='showme_1'>
    <object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
    </object>
</div>

Надеюсь, это поможет людям сэкономить много времени на исследования.