Textarea en IE7 desaparece al pasar el mouse

Question

Tengo este tipo de página de entrada de datos grande, un tipo de diseño de tabla usando divs. Cada fila tiene subcampos que se pueden alternar para abrir / cerrar. El cambio se activa mediante la configuración de visibilidad CSS. Cada " celda " de la tabla tiene una pequeña imagen en su esquina, hace clic en la imagen y se abre una ventana emergente que le permite poner notas en la entrada.

Esta ventana emergente tiene un área de texto y un conjunto de casillas de verificación, junto con un botón (tipo de entrada = enviar, creo). La ventana emergente es un iframe anidado dentro de un div oculto.

En IE7, una vez que ha abierto este iframe de notas y ha desplazado la página hacia abajo, al pasar el mouse sobre el área de texto emergente, desaparece y muestra el contenido de la página debajo. Las casillas de verificación también muestran la página a continuación cuando pasa el mouse.

Entonces, he intentado algunas soluciones diferentes. El índice Z era lo que esperaba que pudiera usarse para arreglar esto. No hay tanta suerte. Podría intentar reemplazar el área de texto con un tipo de entrada simple = texto, pero como las casillas de verificación también exhiben este error, sospecho que la entrada de texto de una línea también causará el error.

Answer 1

además de bloquear elementos, el índice z funciona para todos los elementos que tienen lo que IE llama hasLayout leer más

Answer 2

La forma más fácil de activar hasLayout (mencionado en otra publicación) es agregar zoom: 1 .

Al depurar algunos de los problemas de visualización más tontos de IE 6/7, a veces simplemente vuelvo un temporal

* {
    zoom: 1;
}

a mi CSS y ver si algo cambia. Si lo hace, comienzo a agregarlo selectivamente a los elementos que comienzan con el elemento, el elemento primario / secundario del elemento, etc.

zoom solo es compatible con IE, por lo que es bastante seguro. tener en su documento. También le evita tener que hacer algo loco, como elementos de posicionamiento absoluto, etc.

Answer 3

Si recuerdo bien, el índice Z solo funciona en elementos de bloque que están absolutamente posicionados. Intente establecer la posición del cuadro emergente en absoluto y luego intente con el índice z. Si necesita que la ventana emergente esté en una posición determinada, configure el elemento de ajuste en posición relativa. He encontrado este problema antes, y creo que lo resolví tal como lo describí.

Answer 4

He tenido exactamente el mismo problema con los campos de entrada y las áreas de texto en IE7, pero solo si les di un ancho.

No recuerdo de dónde lo obtuve, pero encontré esta solución, puede que no sea muy elegante, pero resolvió el problema. Solo agrega:

filter:alpha(opacity=100)

a su atributo CSS de estilo de los campos problemáticos.