Il tag di ancoraggio diventa link non funzionante in un div con float: right;

Ho un link all’interno di un div che galleggia sulla destra dello schermo. Il collegamento non funziona in FF o Chrome, ma funziona in IE (sono stati testati solo con IE8).

L’esempio più semplice assomiglia a questo:

  test  #logo { left:10px; float:left; top:10px; } #feedback { float: right; } ul#menu { position:relative; } ul#menu li { display: inline; list-style: none; } ul#menu li.last { margin-right: 50px; }    

Se rimuovo uno qualsiasi degli stili float o degli stili di posizione, il link diventa selezionabile in Chrome e Firefox. (ma poi il mio layout è distriggersto).

La mia domanda è: che cosa sta causando questo, e c’è un modo affidabile per risolverlo?

Ho avuto lo stesso problema prima. Quando si passa con il mouse sull’ancora, il cursore non cambia al puntatore e non è ansible fare clic sul collegamento.

Ogni volta, è stato a causa di un elemento posizionato che si sovrappone all’ancora, diventando effettivamente uno strato tra il mouse e l’ancora. Di solito è un’immagine come la tua.

Assicurati che l’immagine non sia così ampia che la sua larghezza o la sua larghezza non siano sovrapposte all’ancora. Se questo non è il motivo, fai lo stesso con il menucontainer.

Usi firebug per firefox? In caso contrario, potrebbe aiutare a scoprire eventuali problemi sovrapposti.

Ho una domanda all’interno di una risposta per te … perché stai posizionando il ul#menu senza dichiarare un attributo top, bottom, left o right? Solo curioso. Non sono abituato a vedere quelli che non sono lì.

 ul#menu { position:relative; overflow:auto; } 

sembra aggiustarlo

Credo che sia perché i float non vengono cancellati e non hai specificato alcuna larghezza, quindi i due elementi flottanti sono “sovrapposti”.

 

company city

Prova questo . . .

La mia soluzione: assicurati che lo z-index del divendente sia più grande di quelli che lo circondano (potrebbe essere uno straripamento).

Imposta l’elemento con il menucontainer ID per avere l’attributo: clear e il valore: entrambi, o almeno a sinistra.

Il suo menucontainer ID si sovrappone al tuo link.

   test    

Prova questo

HTML

     
​ ​​​​​​​​​​​​​​​​​​​​​​​

css

 .clear{ clear:both; } #logo { float:left; margin:10px; } #feedback { float: right; } ul#menu { } ul#menu li { float:left; } ul#menu li a{ display:block; } ul#menu li.last { margin-right: 50px; }​ 

demo funzionante

Metti questo ai tuoi stili

 #menucontainer { clear: both; }