Текстовая область в IE7 исчезает при наведении мыши

Question

У меня есть страница с большим вводом данных, табличный вид с использованием divs. В каждом ряду есть подзаголовки, которые можно открывать / закрывать. Переключение происходит с использованием настроек видимости CSS. Каждая «ячейка» таблицы имеет небольшое изображение в своем углу, вы нажимаете на изображение, и открывается всплывающее окно, которое позволяет вам делать заметки на записи.

В этом всплывающем окне есть текстовая область, набор флажков и кнопка (я думаю, тип ввода = отправить). Всплывающее окно - это iframe, вложенный в скрытый div.

В IE7, как только вы откроете этот блокнот iframe и прокрутите страницу вниз, при наведении курсора на текстовую область всплывающего окна он исчезнет и отобразит содержимое страницы под ним. Флажки также показывают страницу ниже, когда вы наводите курсор мыши.

Итак, я пробовал несколько разных исправлений. Я надеялся, что Z-индекс может быть использован, чтобы это исправить. нет такой удачи Я мог бы попытаться заменить текстовую область простым вводом type = text, но поскольку флажки также показывают эту ошибку, я подозреваю, что однострочный ввод текста также вызовет ошибку.

Answer 1

Самый простой способ вызвать hasLayout (упомянутый в другом посте) - добавить zoom: 1.

При отладке некоторых самых глупых проблем с отображением IE 6/7 я иногда просто сбрасываю временную

* {
    zoom: 1;
}

на мой CSS и посмотрим, что изменится. Если это так, я начинаю выборочно добавлять его к элементам, начиная с элемента, родительского / дочернего элемента и т. Д.

zoom поддерживается только IE, так что это довольно "безопасно" в вашем документе. Это также избавляет вас от необходимости делать что-то сумасшедшее, например, абсолютно позиционирование элементов и т. Д.

Answer 2

в дополнение к элементам блока z-index работает для всех элементов, которые имеют то, что IE называет hasLayout read *

Answer 3

Если я правильно помню, Z-Index работает только над блочными элементами, которые абсолютно позиционированы. Поэтому попробуйте установить абсолютную позицию всплывающего окна, а затем попробуйте z-index. Если вам нужно, чтобы всплывающее окно находилось в определенной позиции, установите элемент обертки в положение относительное. Я сталкивался с этой проблемой раньше, и я думаю, что решил ее так, как я описал.

Answer 4

У меня была точно такая же проблема с полями ввода и текстовыми областями в IE7, но только если я дал им ширину.

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

filter:alpha(opacity=100)

к вашему атрибуту стиля сложных полей.