Problemi CSS: con ul personalizzato, navigazione a discesa li in ie, specialmente con l'overflow ie6: bug visibile

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

Domanda

L'essenza del bug ie6 (le voci del menu a discesa devono essere troncate tramite overflow nascosto per impedire ad es. di espandersi in modo errato invece di agire come overflow: visibile) può essere visto nella sua forma corrente (hacky) nello screenshot qui sotto e sito http://zd-cms.com

Sbagliato (ie6):

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

Destra (FF, IE8, Chrome):

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

La voce di menu dovrebbe mostrare:

  • Contattaci
  • Rivenditori
  • Supporto
  • Servizi di progettazione

Ma dal momento che non riesco a ottenere un overflow: visibile lavorando o simulandolo altrimenti, parti dei menu a discesa vengono tagliate. Attualmente il CSS nel foglio di stile specifico di ie6 è: 

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

Alcune soluzioni al bug che ho provato: Sono a conoscenza dell'overflow ie6: bug visibile, (come da qui: http: // www .positioniseverything.net / explorer / expandingboxbug.html ), che rende l'overflow: visibile null e void. Leggi: Strategia per la correzione di bug di layout in IE6? e provato un alcuni hack per provare a farlo funzionare davvero come un overflow: visibile, ma nulla ha funzionato.

In questo momento, ho la parte a discesa del menu impostata su overflow: nascosta come ultima soluzione fossile perché non riesco a ottenere ie6 per lasciare che il menu agisca in un overflow: modo visibile.

Sarebbe molto apprezzato sottolineare anche eventuali problemi con il navigatore in ie7 o ie8.

Suggerimenti?

È stato utile?

Soluzione

Questo ha funzionato per me: 

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

Il float dà a li la giusta larghezza, e la posizione relativa e l'indice z lo fanno mostrare sopra (cioè non vincolato da) l'ul.

Altri suggerimenti

Prova questo (supponendo che desideri che il menu a discesa [più sottotitoli secondari] sia autorizzato anche a "virare" su qualsiasi altro elemento della pagina che si frapponga): 

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

Forzare il contenuto della navigazione secondaria in posizione relativa non cambierà posizione sulla pagina. Tuttavia, ti consente di usare l'assoluta di posizione sugli elementi figlio, mantenendoli contenuti all'interno del genitore di default E rilasciandolo dal "flusso". della pagina (evitando così l'effetto push down).

Prova anche: 

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

o ... 

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

potresti fare height: 100%; anche.

È un problema di hasLayout inventato da Microsoft. Trovate le informazioni qui: http://zoffix.com/css/ie/haslayout.shtml

Spero che questo aiuti ...

Questo dovrebbe funzionare 

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

Una larghezza automatica viene utilizzata per adottare le dimensioni di ciascun elemento di navigazione senza dover assegnare a ciascuno una larghezza fissa.

Spero che questo aiuti.

Suggerisco di usare una posizione relativa al contenitore, specificando in alto e a sinistra e in larghezza

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top