CSS Probleme: mit benutzerdefinierten ul, li Drop-Down-Navigation in dh vor allem mit dem IE6 Überlauf: sichtbare Fehler

StackOverflow https://stackoverflow.com/questions/1632418

Frage

Das Wesen des IE6 Bug (Drop-Down-Einträge müssen über Überlauf abgeschnitten versteckt dh um zu verhindern, falsch statt, die als Überlauf erweitert: sichtbar) kann in zu sehen, es ist Strom (Hacky) Form in der Abbildung unten, und bei der Website http://zd-cms.com

Wrong (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

Der Menüeintrag soll zeigen:

  • Kontakt
  • Resellers
  • Support
  • Designer Dienstleistungen

Da ich aber nicht überlaufen bekommen: sichtbare Arbeits oder anderweitig simulieren, Teile des Dropdown-Menüs erhalten abgeschnitten. Derzeit ist die CSS in der IE6-spezifischer Sheet ist: 

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

Einige Lösungen für die Fehler, die ich versucht habe: Ich bin mir bewusst, der IE6 Überlauf: sichtbare Fehler (wie pro hier: http: // www .positioniseverything.net / Explorer / expandingboxbug.html ), der Überlauf macht: sichtbar null und nichtig. Lesen Sie: Strategie für Fixing-Layout Bugs in IE6 und versucht, eine einige Hacks zu versuchen, es wirklich als Überlauf wirkt zu machen. sichtbar, aber nichts funktionierte

Im Moment hat ich den Drop-Down-Teil des Menüs bekommt Überlauf gesetzt: als letzte Graben Lösung versteckt, weil ich IE6 nicht das Menü Akt in einem Überlauf erhalten lassen kann. Sichtbare Weise

Probleme Unter Hinweis darauf, mit dem nav in IE7 oder IE8 würde viel auch geschätzt werden.

Verbesserungsvorschläge?

War es hilfreich?

Lösung

Das funktioniert für mich: 

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

Der Schwimmer gibt dem li die richtige Breite und die Position relativ und z-index es oben zeigen lassen (dh nicht eingeschränkt durch) die ul.

Andere Tipps

Probieren Sie dies aus (unter der Annahme, dass Sie die Drop wollen down [zuzüglich Unterunterunter], um auch zu „schweben“ über alle anderen Elemente auf der Seite erlaubt zu werden, die in die Quere kommen): 

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

Erzwingen der li die Subnavigation containg relativ zur Position auf der Seite nicht Position ändern. Sie räumt jedoch ein, können Sie Position absolut auf untergeordneten Elemente verwenden, während sie innerhalb des übergeordneten standardmäßig enthalten zu halten, und aus dem „Flow“ der Seite Freigabe (und damit die Push-down-Effekt zu verhindern).

Versuchen Sie entweder: 

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

oder ... 

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

Sie könnten height:100%; tun auch.

Es ist ein hasLayout Problem, dass Microsoft erfunden. Gefunden die Infos hier: http://zoffix.com/css/ie/haslayout.shtml

Hope, das hilft ...

Das sollte funktionieren 

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

Eine automatische Breite verwendet wird, um die Größe der einzelnen Navigationselemente zu übernehmen, ohne dass jedes eine feste Breite geben.

Hope, das hilft.

Ich schlage vor, eine relative Position zu dem Behälter zu verwenden, mit Top-Angabe und links und Breite

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top