Textarea в IE7 исчезает при наведении курсора мыши
У меня есть страница с большим вводом данных, макет таблицы с использованием div. В каждой строке есть подстрочки, которые можно открывать / закрывать. Переключение запускается с использованием настроек видимости css. Каждая «ячейка» таблицы имеет маленькое изображение в углу, вы щелкаете по изображению, и открывается всплывающее окно, в котором вы можете добавлять заметки к записи.
В этом всплывающем окне есть текстовая область и набор флажков, а также кнопка (я думаю, input type = submit). Всплывающее окно - это iframe, вложенный в скрытый div.
В IE7, как только вы открыли этот iframe заметок и прокрутили страницу вниз, наведение курсора мыши на текстовое поле всплывающего окна заставляет его исчезнуть и отобразить содержимое страницы под ним. Флажки также отображают страницу ниже при наведении указателя мыши.
Итак, я попробовал несколько разных исправлений. Я надеялся, что Z-index можно использовать, чтобы исправить это. нет такой удачи. Я мог бы попробовать заменить текстовую область обычным вводом type = text, но поскольку флажки также показывают эту ошибку, я подозреваю, что однострочный ввод текста также вызовет ошибку.
Ответы 4
Если я правильно помню, Z-Index работает только с абсолютно позиционированными блочными элементами. Поэтому попробуйте установить абсолютное положение всплывающего окна, а затем попробуйте z-index. Если вам нужно, чтобы всплывающее окно находилось в определенной позиции, установите элемент обертки в положение относительно. Я сталкивался с этой проблемой раньше, и я считаю, что решил ее именно так, как я описал.
в дополнение к блочным элементам z-index работает для всех элементов, у которых есть то, что IE называет hasLayout Подробнее
Самый простой способ запустить hasLayout (упомянутый в другом посте) - это добавить zoom: 1.
При отладке некоторых самых глупых проблем с отображением IE 6/7 я иногда просто сбрасываю временный
* {
zoom: 1;
}
в мой CSS и посмотреть, не изменится ли что-нибудь. Если это так, я начинаю выборочно добавлять его к элементам, начиная с элемента, родительского / дочернего элемента и т. д.
zoom поддерживается только IE, поэтому его использование в вашем документе довольно «безопасно». Это также избавляет вас от необходимости делать что-нибудь безумное, например, абсолютное позиционирование элементов и т. д.
У меня была такая же проблема с полями ввода и текстовыми полями в IE7, но только если я дал им ширину.
Я не помню, откуда я его взял, но я нашел это решение, оно может быть не очень элегантным, но оно решило проблему. Просто добавь:
filter:alpha(opacity=100)
к вашему css of style атрибуту проблемных полей.
спасибо за этот совет. эта ссылка на haslayout.net ДЕЙСТВИТЕЛЬНО полезна. Я до сих пор не смог это исправить, но это, вероятно, связано с тем, что страница, над которой я работаю, настолько сложна и заполнена мусором. эта информация очень поможет.