E eu, assim como todo mundo, sabia que era impossível resolver esse problema. Então, fui ler alguns documentos na MSDN para tentar entender o problema e percebi como é confuso e ruim esse engine de páginas do Microsoft Internet Explorer. Vamos as conclusões:
- O <SELECT> não entende o zIndex, e é o zIndex que faz o posicionamento para frente e para traz dos elementos na tela. Bem, isso todo mundo já sabe, e esse é o problema, mas é por ai que ascoisas realmente irão ficar estranhas.
- O <IFRAME> entende o zIndex como qualquer outro elemento HTML, só que o <IFRAME> tem uma propriedade especial, que ele consegue ficar na frente do <SELECT> desde que tenha um zIndex maior que o do <SELECT>, e lembre-se que eu disse que o <SELECT> não entende o zIndex, e realmente não entende, tá na documentação, mas nesse caso, pense que ele entende :). Então nessa hora pensei: Eu tenho um cachorro, e ele se chama BINGO!!!!!!
- Agora vem a parte mais estranha, o <IFRAME> consegue ficar na frente do <SELECT>, e o <IFRAME> entende o zIndex como todos os outros elementos, então meu amigo, olha a confusão, se você colocar um <IFRAME> sobre um <SELECT> e colocar um <DIV> sobre o <IFRAME> com um zIndex maior que todos os outros elementos, SUA <DIV> VAI FICAR NA FRENTE DO <SELECT>. Ai está a solução para um dos problemas mais bizarros da humanidade.
Nos meus testes coloquei um iframe oculto na página:
<iframe id="iFrameMenu" src="" style="visibility: hidden; position: absolute; z-index: 2;"></iframe>
Criei o como com um zIndex menor:
<select id="combo" style="z-index:1" >
O <DIV> do menu eu criei normal, só que na hora de mostrar eles na tela a jogada é colocar o <IFRAME>, na mesma posição do <DIV> com a mesma altura e larguro, e com um zIndex menor. Neste caso, o <DIV> vai esconder completamente o <IFRAME> e vai parecer que ele nem existe. Só que, se por algum motivo alheio a nossa vontade, tiver um <SELECT> no mesmo espaço onde ta o <DIV>, o <IFRAME> vai fazer com que o <SELECT> fique atraz do <DIV> que está na frente.
É enrolado, mas é isso, para entender melhor, de uma olhada nesse exemplo. Para complicar um pouco mais, nesse exemplo eu coloquei o <SELECT> dentro de outro <IFRAME>.
E pronto meu amigo, seus problemas com o <SELECT> acabaram! Eu realmente odiava muito ter que esconder os um monte de campo quando abria um menu. Já vi situações em que a tela toda ficava escondida quando se abria o menu somente por causa desse problema.
E eu ainda fico pensando, as vezes me passa pela cabeça que o Bill Gates é uma lenda urbana, e a Microsoft é na verdade meu visinho de 16 anos que passa o dia e a noite programando e não ganha dinheiro porque todo mundo pirateia o Windows. Como pode uma empresa que diz ter milhoes e sem saber o que fazer com o dinheiro não resolver um problema desses que incomoda tanta gente? Eu sinceramente não sei a resposta, mas tenho uma coisa a dizer: Seja Feliz!
rapaz !!!!! Vc descobriu o ouro. Esse negócio ja estava me deixando doidinha .... mas me fale uma coisa! Troquei o "onClick" por "onMouseOver", mas tenho que fazer o "onMouseOut" tb que não consigo fazer funcionar ... pode me dá uma dica nesse JS? valeu! parabéns vc venceu um grande desafio!
ResponderExcluirOlha eu nao to conseguindo fazer funcionar isso no ie...
ResponderExcluirFunciona se o select estiver em um include?
mas isso só funciona para posições absolutas certo?
ResponderExcluirBoa boa.... mais um bug safado do IE contornado!
ResponderExcluirValeu pela dica. Testei e aprovei. Funcionou perfeitamente e, de agora em diante, vou usar sempre esta técnica promissora.
ResponderExcluirParabéns, agora só falta a solução para a fome na África e as guerras no Oriente Médio, boa sorte! O resto a gente vai levando!... Rs...
ResponderExcluirAbraço
Cara.... Sem comentários! Excelente! Parabéns e valeu pela ajuda! Abrass
ResponderExcluirO pior de tudo é que não corrigiram este bug safado no IE 7! essa microsoft não vale NA-DA! alguem já testou na versão beta do 8? será que eles fizeram a lição de casa?? rs
ResponderExcluirIE realmente ridículo. Felizmente pessoas conseguem esses bug e outras divulgam.
ResponderExcluirNo IE7 já esta corrigido sim!
ResponderExcluir