YUI Autocomplete torna sob outros elementos da página no IE7

Question

Eu estou trabalhando agora em uma página que tem uma coluna de caixas de estilo com sombras e cantos sensuais e outros enfeites usando o exemplo aqui . Eu tenho que admitir, eu não entender completamente como funciona CSS, mas aparência grande.

Dentro da caixa de nível superior é uma entrada do tipo de texto usado para pesquisa. Essa caixa de pesquisa está conectado a um YUI autocomplete widget.

Tudo funciona bem em Firefox3 no Mac, FF2 no Windows, o Safari no Mac. No IE7 em WinXP, as sugestões de preenchimento automático tornar debaixo das caixas encurralado redondo, tornando todos, mas o primeiro ilegível (embora você ainda pode ver o suficiente espiando entre as caixas que eu estou confortável IE7 realmente está ficando mais do que uma sugestão).

Onde eu poderia começar a olhar para corrigir o problema?

Aqui está o que se parece com sucesso em FF2 no WinXP:

E aqui está o que parece falha como em IE7:

Answer 1

A solução de trabalho eu finalmente implementado foi baseado na leitura esta explicação uma e outra vez .

No HTML subjacente, todos os azuis elementos de canto arredondadas são DIVs, e eles são todos irmãos (todos filhos do mesmo DIV).

O z-index do autocomplete Div si (que é o grande-grande-neto do recipiente div canto arredondado) pode ser arbitrariamente alto, e que não irá corrigir esse problema, porque o IE foi essencialmente tornando todo o conteúdo da caixa de pesquisa abaixo todo o conteúdo da caixa "Estatísticas vitais", porque ambos padrão teve z-index, e Vital Estatísticas era depois no HTML.

O truque foi para dar cada um destes DIVs irmãos (os azuis recipientes de canto arredondadas) descendente z-índices, e marcar todos eles posição: relativa. Assim, o div azul que contém a caixa de busca é z-index: 60, a caixa de "Vital Estatísticas" é z-index: 50, "Tag" é z-index:. 40, e assim por diante

Assim, mais geralmente, encontrar o ancestral comum de ambos o elemento que está sendo sobrepostas e o elemento que se sobrepõe. Sobre os filhos imediatos do ancestral comum, aplicar z-índices na ordem que você deseja que o conteúdo apareça.

Answer 2

Jeremy,

Infelizmente para este ser tão tarde, mas espero que a resposta será de utilidade para você em um projeto futuro.

O problema aqui é que o IE cria uma nova ordem de empilhamento sempre que houver um elemento com position: relative, o que significa que z-index em si não é o único fator de controle. Você pode ler mais sobre isso aqui:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Para resolver o problema, se eu estou entendendo o seu problema corretamente, aplicar position: relative ao recipiente que envolve sua implementação autocomplete todo (e, em seguida position: absolute para o seu container de resultados). Isso deve criar uma ordem de empilhamento independente no IE para aqueles elementos que lhes permite flutuar sobre a outra posição:. Pilhas relativos que aparecem mais tarde na página

Saudações, Eric

Answer 3

Eu não sou totalmente compreender a configuração que está levando para o problema, mas você pode querer explorar a propriedade useIFrame do objeto YUI Autocomplete - TI camadas um objeto iframe abaixo do campo autocomplete, que permite que o campo para depois flutuar acima os objetos que estão obscurecendo-lo no layout de buggy do IE.

http://developer.yahoo.com/yui /docs/YAHOO.widget.AutoComplete.html#property_useIFrame

Mas os médicos dizem que isso importa em 5,5 valores de Z-index para o campo de preenchimento automático e os elementos de bloco circundante.

Answer 4

Verifique se o z-index do div auto-complete é um número maior do que os divs que constituem a caixa de canto arredondado. Microsoft coloca o z-index das principais elementos para 20000 ou 100000 Eu acredito. Pode ser sábio para fazer o mesmo.

Answer 5

Eu tive um problema semelhante a este, eu fixa-lo, basicamente, apenas mudando z-index para os diferentes divs. Apenas ajuste maior número para cada div na ordem ele deve exibir.