Iframe Shimming ou IE6 (e abaixo) Selecione o Bug Z-Index

Question

Uhm não tenho certeza se alguém encontrou esse problema
Uma breve descrição está no IE6 qualquer <select> Os objetos são exibidos sobre qualquer outro item, mesmo os div ... ou seja, se você tiver um efeito JavaScript sofisticado que exibe uma div que deveria estar em cima de tudo (por exemplo: LightBox, MultiBox etc.) OnClick de um determinado elemento e que Div se sobrepõe a <select> seu div é exibido como se estivesse sob o <select> Nesse caso, um índice Z máximo e mínimo não funciona

Eu tentei pesquisar no Google e encontrei a solução iframe shim
Mas eu queria algumas alternativas bastante limpas ou melhor, mas alguém encontrou uma solução melhor? Como o método usando iframes usa cerca de 130 MB de RAM pode desacelerar as máquinas das pessoas pobres

Answer 1

Você não tem que esconder cada select usando um loop. Tudo que você precisa é de uma regra CSS como:

* html .hideSelects select { visibility: hidden; }

E o seguinte JavaScript:

//hide:
document.body.className +=' hideSelects'

//show:
document.body.className = document.body.className.replace(' hideSelects', '');

(Ou, você pode usar o seu favorito addClass / removeClass implementação).

Answer 2

Há um plugin para jQuery chamado bgiframe Isso facilita a implementação do método iframe.

Pessoalmente, como desenvolvedor da web, estou no ponto em que não me importo mais com a experiência do usuário no IE6. Vou torná -lo o mais próximo possível de "correto" e garantir que seja funcional, mas no que diz respeito à velocidade, muito ruim. Eles podem atualizar. O IE7 (embora ainda muito lento, em comparação com todos os outros navegadores) está fora há 2 anos (quase até o dia!). O IE8 vai sair em breve. O Firefox está disponível para todas as plataformas. O Safari também é uma opção (e super rápida). O Opera está disponível para a maioria/todas as plataformas.

O IE6 foi lançado há mais de 7 anos. IMHO, não há razão para ainda usá -lo, além de usuários preguiçosos e departamentos incompetentes de TI (ou se você é um desenvolvedor da Web).

Answer 3

Caso alguém esteja interessado, aqui estão alguns códigos de calca de IE.

* html .shimmed {
    _azimuth: expression(
        this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
        'inherit');
}

Ref: esta essência por sutlegradiente e isto Postado por Zach Leatherman

Answer 4

Antes do IE7, a lista suspensa era um controle "janela", o que significava que ela foi renderizada como um controle diretamente pelo Windows, em vez do navegador que o sintetizava. Como tal, não foi possível apoiar a indexação Z contra outros controles sintetizados.

Para aparecer em um DDL, você deve usar outro controle em janela, como o iframe. Você também pode usar um recurso pouco conhecido do IE chamado Window.CreatePOPUPP (), que essencialmente faz um pop-up sem crise. Possui limitações, como cliques imparáveis, mas eles são realmente úteis se você estiver criando um sistema de menu pairar.

Answer 5

A solução mais simples e elegante para esse inseto irritante do IE é encontrado em: http://docs.jquery.com/plugins/bgiframe usando jQuery.

Cheguei a essa conclusão depois de tentar por 2 dias para fazê-lo funcionar com aplicativos WebSphere Portal / Portal, onde tudo é dinâmico, incluindo o menu de mosca.

Answer 6

Há também o método ActiveX, que estou começando a explorar. Requer a criação de código condicional para usar um controle ActiveX em vez de uma caixa de seleção para o IE6. Há um script de demonstração mostrando a técnica, que é discutido em mais detalhes aqui.

ATUALIZAÇÃO: Parece que o MS Office é necessário para que o controle Active-X esteja na máquina do usuário. Em teoria, pode ser possível incluir isso em algum lugar, de alguma forma, mas isso está ficando muito mais confuso.

Answer 7

Sei que muitas pessoas sugeriram suas próprias dicas, mas, no meu caso, simplesmente escondo seleto usando jQuery como o abaixo.

$(':date').dateinput({
    format: 'dd/mm/yyyy',
    onBeforeShow: function(event) {
        $('select').hide();
    },
    onHide: function(event) {
        $('select').show();
    }
});