problemas CSS: com ul costume, navegação suspensa li no IE, especialmente com o transbordamento IE6: bug visível

Question

A essência do bug IE6 (entradas suspensas devem ser truncado via transbordamento escondido para evitar ou seja, de forma incorrecta expansão em vez de agir como overflow: visível) pode ser visto em sua forma atual (hacky) na imagem abaixo, e ao local http://zd-cms.com

errada (IE6):

http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png

Right (FF, IE8, Chrome):

http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png

A entrada de menu deve mostrar:

• Contato
• Revendedores
• Suporte
• Serviços Designer

Mas desde que eu não posso chegar overflow: trabalho visível ou não simulá-lo, partes dos menus suspensos ficar cortada. Atualmente, o css na folha de estilo específica IE6 é:

#zd-nav {
  padding-left:0;
  margin-left:0;
  background-color:transparent;
}
#zd-nav .zd-sub-nav{
  margin-top:5px;
  **width:73px**;
  **overflow:hidden;**
}

Algumas soluções para o erro que eu tentei: Estou ciente do que está cheio o IE6: bug visível, (como por aqui: http: // www .positioniseverything.net / explorador / expandingboxbug.html ), o que torna overflow: nulo visível e sem efeito. Leia através de: Estratégia para fixar erros de layout no IE6 e tentou um? alguns hacks para tentar torná-lo realmente agir como overflow:. visível, mas nada funcionou

Agora, eu tenho a parte suspensa do conjunto menu para overflow: hidden como uma solução de último recurso, porque eu não posso começar IE6 para deixar o ato menu em um overflow:. Forma visível

Apontando quaisquer problemas com o nav no IE7 ou IE8 seria muito apreciado também.

Sugestões?

Answer 1

Isso funcionou para mim:

#zd-nav .zd-sub-nav li{
    float:left; 
    clear:left; 
    position:relative; 
    z-index:20; /* or some other arbitrary biggish number */
}

O flutuador dá o li a largura direita, e a posição relativa e índice z torná-lo mostram acima (ou seja, não constrangido por) o ul.

Answer 2

Tente fazer isto (supondo que você deseja que o drop-down [mais sub sub sub] para também ser autorizados a "flutuar" sobre quaisquer outros elementos na página que ficam no caminho):

.zd-nav-active {
    position: relative;
}
.zd-sub-nav {
    position: absolute;
    z-index:10000;
}

Forçar o li containg o sub navegação para a posição relativa não vai mudar de posição na página. É, no entanto, permitem que você use posição absoluta na elementos filhos, mantendo-os contidos dentro do pai por padrão, e liberando-a do "fluxo" da página (evitando assim o impulso para baixo efeito).

Answer 3

Tente qualquer um:

word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/

ou ...

width:100%; /*instead of setting the width to 73px*/

você poderia fazer height:100%; também.

É uma questão hasLayout que a Microsoft inventou. Encontrado as informações aqui: http://zoffix.com/css/ie/haslayout.shtml

Espero que isso ajude ...

Answer 4

Isso deve funcionar

#zd-nav .zd-sub-nav{ 
    margin-top:5px;
    width: auto;
    display: block;
    overflow: visible
    }

Um auto largura é usado para adotar o tamanho de cada item de navegação sem a necessidade de dar a cada um uma largura fixa.

Espero que isso ajude.

Answer 5

I sugerem a utilização de uma posição em relação ao recipiente, com a especificação de topo e esquerda e largura