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

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

* {
    zoom: 1;
}

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

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

Answer 3

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

Answer 4

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

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

filter:alpha(opacity=100)

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