Problèmes CSS: avec la navigation personnalisée ul, li dropdown dans ie, en particulier avec le débordement ie6: bogue visible

Question

L'essence du bogue ie6 (les entrées du menu déroulant doivent être tronquées via un débordement masqué pour éviter, par exemple, de se développer de manière incorrecte au lieu d'agir comme un débordement: visible) peut être vue dans sa forme actuelle (hacky) dans la capture d'écran ci-dessous, et à la page suivante: site http://zd-cms.com

Mauvais (ie6):

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

Droite (FF, IE8, Chrome):

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

L'entrée de menu doit afficher:

• Contactez-nous
• Revendeurs
• Assistance
• Services Designer

Mais comme je ne peux pas avoir trop de débordement: visible de fonctionner ou de le simuler, certaines parties des menus déroulants sont coupées. Actuellement, le css dans la feuille de style spécifique à ie6 est:

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

Quelques solutions au bogue que j'ai essayé: Je suis conscient du bogue débordé de ie6: bogue visible (comme ici: http: // www .positioniseverything.net / explorer / expandboxbug.html ), ce qui génère un débordement: visible null and void. Lisez: Stratégie de correction des bogues de mise en forme dans IE6? et essayez quelques astuces pour essayer de le faire vraiment agir comme un débordement: visible, mais rien n'a fonctionné.

Pour le moment, la partie du menu déroulante du menu est définie sur débordement: masquée comme solution de dernier recours car je ne parviens pas à laisser ie6 agir sur le menu de manière débordante: visible.

Il serait également très utile de signaler les problèmes de navigation dans ie7 ou ie8.

Des suggestions?

Answer 1

Cela a fonctionné pour moi:

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

Le float donne au li la bonne largeur, et la position relative et l’indice z le font apparaître ci-dessus (c’est-à-dire qu’il n’est pas contraint par) le ul.

Answer 2

Essayez ceci (en supposant que vous souhaitiez que le menu déroulant [ainsi que les sous-sous-sous] soit également autorisé à "flotter" sur tout autre élément de la page qui gênerait:

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

Le fait de forcer le lien contenant la sous-navigation à positionner relative ne changera pas la position sur la page. Cependant, cela vous permet d'utiliser la position absolue sur les éléments enfants, tout en les conservant par défaut dans le parent, ET en les libérant du "flux". de la page (évitant ainsi l’effet de pression).

Answer 3

Essayez soit:

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

ou ...

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

vous pourriez aussi faire hauteur: 100%; .

C'est un problème hasLayout inventé par Microsoft. Vous avez trouvé l'info ici: http://zoffix.com/css/ie/haslayout.shtml

J'espère que cela vous aidera ...

Answer 4

Cela devrait fonctionner

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

Une largeur automatique est utilisée pour adopter la taille de chaque élément de navigation sans qu'il soit nécessaire de donner à chacun une largeur fixe.

J'espère que cela vous aidera.

Answer 5

Je suggère d'utiliser une position relative par rapport au conteneur, en spécifiant haut, gauche et largeur