problemas CSS: com ul costume, navegação suspensa li no IE, especialmente com o transbordamento IE6: bug visível
-
06-07-2019 - |
Pergunta
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):
Right (FF, IE8, Chrome):
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?
Solução
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.
Outras dicas
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).
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 ...
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.
I sugerem a utilização de uma posição em relação ao recipiente, com a especificação de topo e esquerda e largura