Textarea no IE7 desaparece no mouse sobre

Question

Eu tenho essa grande entrada de dados tipo de página, uma espécie de mesa de layout usando divs. Cada linha tem subrows que pode ser alternado aberto / fechado. A alternância é acionado usando configurações de visibilidade css. Cada "célula" da tabela tem um pouco de imagem no seu canto, você clique sobre a imagem, e uma janela pop-up abre que lhe permite colocar notas na entrada.

Esta janela pop-up tem uma área de texto e um conjunto de caixas de seleção, juntamente com um botão (input type = submeter, eu acho). O pop-up é um iframe aninhada dentro de uma div oculta.

No IE7, uma vez que você abriu este notas iframe e rolado o baixo página, passar o mouse sobre textarea do pop-up faz com que desapareça e mostrar o conteúdo da página abaixo dela. As caixas também mostram a página abaixo quando você passar o mouse.

Então, eu tentei algumas correções diferentes. Z-índice era o que eu estava esperando que poderia ser usado para corrigir isso. não tive essa sorte. Eu poderia tentar substituir a área de texto com uma entrada simples type = text mas desde que as caixas também apresentam esse bug, eu suspeito que a entrada de texto de uma linha irá também causa o erro.

Answer 1

Além de elementos de bloco do z-index funciona para todos os elementos que têm o IE chama hasLayout ler mais

Answer 2

A maneira mais fácil de hasLayout gatilho (mencionado em outro post) é adicionar zoom: 1.

Quando a depuração algumas das mais estúpidas questões 6/7 exibição ou seja, eu, às vezes, simplesmente despejar um temporária

* {
    zoom: 1;
}

Para o meu CSS e ver se alguma coisa muda. Se isso acontecer eu começo seletivamente adicioná-lo a elementos começando com o elemento, pai do elemento / crianças, etc.

zoom só é suportado pelo IE, por isso é muito "seguro" para ter em seu documento. Ele também evita que você tenha que fazer nada louco como elementos absolutamente posicionamento, etc.

Answer 3

Se eu me lembro Z-Index único trabalho direito de nos elementos de bloco que está posicionado de forma absoluta. Então, tente definir a posição da caixa de pop-up para absoluta e, em seguida, tentar o z-index. Se você precisa de pop-up para estar em uma determinada posição definir o elemento de envolvimento de posição relativa. Eu encontrei este problema antes, e eu acredito que eu resolvido apenas na maneira que descrevi.

Answer 4

Eu tive o mesmo problema exato com os dois campos de entrada e textareas em IE7, mas apenas se eu lhes desse uma largura.

Não me lembro onde eu tenho que partir, mas eu encontrei esta solução, pode não ser muito elegante, mas resolveu o problema. Basta adicionar:

filter:alpha(opacity=100)

para o seu css de atributo de estilo dos campos problemáticos.