Como resolver o bug de sobreposição de seleção no IE6?

Question

Ao usar o IE, você não pode colocar um div posicionado de forma absoluta sobre um elemento de entrada selecionado.Isso ocorre porque o elemento select é considerado um objeto ActiveX e está acima de todos os elementos HTML da página.

Já vi pessoas escondendo seleções ao abrir uma div pop-up, o que leva a uma experiência muito ruim do usuário com o desaparecimento dos controles.

Na verdade, o FogBugz tinha uma solução bastante inteligente (antes da v6) de transformar cada seleção em caixas de texto quando um popup era exibido.Isso resolveu o bug e enganou a visão do usuário, mas o comportamento não era perfeito.

Outra solução está no FogBugz 6 onde eles não usam mais o elemento select e o recodificam em todos os lugares.

A última solução que uso atualmente é bagunçar o mecanismo de renderização do IE e forçá-lo a renderizar o posicionado absolutamente <div> também como um elemento ActiveX, garantindo que ele possa residir em um elemento selecionado.Isto é conseguido colocando um invisível <iframe> dentro de <div> e estilizando-o com:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

Alguém tem uma solução ainda melhor que esta?

EDITAR:O objetivo desta pergunta é tão informativo quanto uma questão real.eu acho o <iframe> truque para ser uma boa solução, mas ainda estou procurando melhorias como remover isso etiqueta feia e inútil que degrada a acessibilidade.

Answer 1

Não conheço nada melhor que um Iframe

Mas me ocorreu que isso poderia ser adicionado em JS procurando algumas variáveis

1. Ou seja, 6
2. Um índice Z alto (você tende a ter que definir um índice z se estiver flutuando em um div)
3. Um elemento de caixa

Então, um script que procure esses itens e apenas adicione uma camada iframe seria uma boa solução

Paulo

Answer 2

Obrigado pela solução de hack de iframe.É feio e ainda assim elegante.:)

Apenas um comentário.Se acontecer de você estar executando seu site via SSL, a tag iframe fictícia precisa ter um src especificado, caso contrário, o IE6 irá reclamar com um aviso de segurança.

exemplo:

    <iframe src="javascript:false;"></iframe>

Já vi algumas pessoas recomendarem definir src como blank.html...mas gosto mais do javascript.Vai saber.

Answer 3

Pelo que eu sei, existem apenas duas opções, a melhor delas é o mencionado uso de um iframe.O outro está ocultando todas as seleções quando a sobreposição é mostrada, levando a uma experiência de usuário ainda mais estranha.

Answer 4

experimente este plugin http://docs.jquery.com/Plugins/bgiframe , deve funcionar!

uso: $('.your-dropdown-menu').bgiframe();

Answer 5

Eu não acho que exista.Tentei resolver esse problema no meu trabalho.Ocultar o controle de seleção foi o melhor que conseguimos (sendo uma loja corporativa com um público cativo, a experiência do usuário geralmente não é levada em consideração nas decisões do PM).

Pelo que pude reunir on-line ao procurar uma solução, simplesmente não há uma boa solução para isso.Gosto da solução FogBugz (a mesma coisa feita por muitos sites importantes, como o Facebook), e é isso que uso em meus próprios projetos.

Answer 6

Eu faço a mesma coisa com caixas de seleção e Flash.

Ao usar uma sobreposição, oculte os objetos subjacentes que passariam.Não é ótimo, mas funciona.Você pode usar JavaScript para ocultar os elementos antes de exibir uma sobreposição e mostrá-los novamente quando terminar.

Tento não mexer com iframes, a menos que seja absolutamente necessário.

O truque de usar rótulos ou caixas de texto em vez de caixas de seleção durante as sobreposições é interessante.Posso usar isso no futuro.

Answer 7

Mootools tem uma solução muito bem definida usando um iframe, chamado iframeshim.

Não vale a pena incluir a lib só para isso, mas se você tiver ela em seu projeto de qualquer maneira, você deve estar ciente de que o plugin 'iframeshim' existe.

Answer 8

Existe um plugin jquery simples e direto chamado bgiframe.O desenvolvedor o criou com o único propósito de resolver esse problema no IE6.

Usei recentemente e funciona perfeitamente.

Answer 9

Ao ocultar os elementos selecionados, oculte-os configurando a opção "visibility:oculto" em vez de exibir:nenhum, caso contrário o navegador irá refluir o documento.

Answer 10

Corrigi isso ocultando os componentes selecionados usando CSS quando uma caixa de diálogo ou sobreposição era exibida:

selects[i].style.visibility = "oculto";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}