Problèmes CSS: avec ul personnalisé, navigation déroulante li dans ie, en particulier avec le débordement ie6: bug visible

L'essence du bogue ie6 (les entrées du menu déroulant doivent être tronquées via un débordement caché pour éviter de se dilater incorrectement au lieu d'agir comme débordement : visible) peut être vu dans sa forme actuelle (hacky) dans la capture d'écran ci-dessous et sur le site http://zd-cms.com Problèmes CSS: avec ul personnalisé, navigation déroulante li dans ie, en particulier avec le débordement ie6: bug visible

Mauvais (iE6):

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

droit (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
soutien
Designer Services

Mais puisque je ne peux pas trop-plein: travail visible ou simuler autrement, 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 bug que je l'ai essayé: Je suis conscient du trop-plein IE6: bug visible, (comme par ici: http://www.positioniseverything.net/explorer/expandingboxbug.html) , ce qui rend overflow: visible nulle et vide. Lire à travers: Strategy for Fixing Layout Bugs in IE6? et essayé quelques hacks pour essayer de faire vraiment agir comme débordement: visible, mais rien n'a fonctionné.

Maintenant, j'ai la partie déroulante du menu à débordement: caché comme une solution de dernier recours parce que je ne peux pas obtenir ie6 pour laisser le menu agir dans un débordement: de manière visible. Il serait également très utile d'attirer l'attention sur des problèmes de navigation dans ie7 ou ie8.

Suggestions?

Source

2009-10-27 Kzqai

Heh, merci Jonathan, cherchait simplement à modifier dans les balises de code. Aurait dû mieux utiliser l'aperçu. – Kzqai

L'homme, IE6 pwns moi, me fait sentir comme un N00b. Whee. – Kzqai

Man, n'ont toujours pas eu le temps de vérifier les solutions supplémentaires. Will avant longtemps, cependant. – Kzqai

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 flotteur donne li la bonne largeur et la position relative et z-index rendent ci-dessus montrent (et non contraint par) ul.

Source

2009-11-09 17:50:36 wheresrhys

Comme c'était simple, je l'ai essayé en premier, et cela a résolu le problème, alors merci. – Kzqai

content de vous aider ..................... – wheresrhys

Puisqu'il est relatif à la position, il provoquera toujours un pushdown sur la page. Mais si ça a réglé le problème, c'est bon. –

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*/

que vous pourriez faire height:100%; aussi.

C'est un problème hasLayout que Microsoft a inventé. Nous avons trouvé l'information ici: http://zoffix.com/css/ie/haslayout.shtml

Hope this helps ...

Source

2009-10-27 18:00:45 tahdhaze09

word-wrap: mot-clé; // Aucun effet. Je pensais que c'était une fonctionnalité css3 de toute façon? Largeur: 100% // a changé la disposition, mais pas du tout, a simplement jeté le menu à une ligne inférieure. hauteur: 100%; // Comme avec la largeur. Si c'était vraiment un problème de hasLayout, il semble que le "zoom: 1" devrait être une bonne façon de le réparer, mais ... ... les googles, zey do nathink. – Kzqai

Eh bien, je l'ai essayé! Vraiment, la meilleure chose est de ne pas développer pour IE6 du tout! Navigateur de 9 ans plein de bugs, et MS ne dérange pas quiconque l'utilise. – tahdhaze09

Oui, aurais-je ce choix. – Kzqai

Essayez ceci (en supposant que vous voulez le menu déroulant [plus de sous sous sous] être autorisé aussi « flotter » au-dessus de tous les autres éléments sur la page qui obtenir de la manière):

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

la li Obliger containg la navigation secondaire à la position relative ne changera pas la position sur la page.Il vous permet cependant d'utiliser la position absolute sur les éléments enfants, tout en les conservant par défaut dans le parent, ET en le libérant du "flux" de la page (empêchant ainsi l'effet push down).

Source

2009-11-04 07:26:05

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 avoir besoin de donner à chacun une largeur fixe.

Espérons que cela aide.

Source

2009-11-10 13:13:19

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

Source

2009-11-10 14:38:08

Problèmes CSS: avec ul personnalisé, navigation déroulante li dans ie, en particulier avec le débordement ie6: bug visible

Répondre

Questions connexes