2011-02-03 19 views
6

Sto affrontando un problema sorprendente. Ho un collegamento ipertestuale su un'immagine sul mio sito cliente. Funziona in IE ma quando apro la stessa pagina in Chrome/Mozilla non mostra il puntatore di ancoraggio e non succede nulla quando si fa clic su entrambi. Il mio codice di collegamento èIl tag di ancoraggio non funziona in firefox e chrome

<a href="Home.aspx?ModuleID=1"> 
    <img src="Images/Logo.gif" border="0"/> 
</a> 

Qualcuno ha qualche idea di quale potrebbe essere il problema?

risposta

0

Senza il codice sorgente HTML completo, indicherò che questo ancoraggio è nidificato o dopo un elemento che non ha un tag di chiusura.

Invia codice sorgente HTML completo se questo non è il problema.

È possibile trovare questo problema facilmente convalidando il documento con:

E 'il W3C validatore ufficiale HTML/XHTML, quindi se qualche elemento non è chiuso, sarà indica quale devi correggere!

MODIFICA: Dopo aver visto il codice sorgente HTML inserito nei commenti della risposta ... dov'è la dichiarazione del tipo di documento (DOCTYPE)? Hai dimenticato di aggiungerlo!

Aggiungere questo all'inizio del documento HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Quando non si fornisce un tipo di documento, i browser visualizzare le pagine web in modalità "quircks", che è una modalità di compatibilità che non può render la tua pagina come ti aspettavi. Scopri di più su questo qui:

fatemi sapere se questo risolve il problema!

+0

Ho controllato con http://validator.w3.org/ non è stato rilevato alcun tag non chiuso. Posso condividere l'intero codice non appena mi collego al server – surenv2003

+0

Impossibile pubblicare l'intero codice a causa del limite utente – surenv2003

+0

Uhm, usa http://pastebin.com/ e pubblica un commento con il link! ;) –

8

Verificare se si sta utilizzando css z-order nella pagina. Gli z-order errati possono far sì che pulsanti e collegamenti non funzionino.

4

Sono di fronte allo stesso problema. This suggestion (aggiungendo la posizione : il relativo al div contenente) sembra indirizzarlo, ma sto facendo il posizionamento assoluto e ho bisogno di aggirare questo in un altro modo. Ho pensato che potrebbe aiutare qualcun altro, però.

+1

Aggiungere perfettamente la posizione dell'attributo css al relativo! – Andres

+0

ha funzionato anche per me! –

11

Semplice Soluzione: Questo funziona con tutti i browser che ho provato finora usare document.getElementById([anchor tag]).scrollToView(true);

Esempio: --from--

<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;"> 

--to--

<a id="ShowMeHow2" name="ShowMeHow2"> </a> 
+0

Funziona, ma non aggiorna la barra degli indirizzi del browser. Scopri come aggiornare la barra degli indirizzi del browser e la cronologia su [Aggiornamento barra degli indirizzi con nuovo URL senza hash o ricarica della pagina] (https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url- senza-hash-o-ricaricare-la-pagina) – johnsampson

0

ho avuto un caso simile. Nel mio caso. Stavo cercando di allineare 3 div usando float sinistra/destra. Uno di loro aveva una posizione: attributo relativo. Una volta rimosso questo, i tag di ancoraggio di Firefox funzionavano. Piuttosto che aggiungere un attributo extra. Spero che questo possa aiutare gli altri.

+0

-Portando insieme la mia esperienza e l'altro commento sull'aggiunta della posizione: relativo sembra che il bug in firefox & co browser sia che all'interno di un determinato contenitore div hanno bisogno di un posizionamento coerente attraverso l'interno div. Altrimenti le ancore non funzionano. – Farjad

0

Ho trovato che a volte è possibile avere erroneamente un altro elemento con lo stesso ID. Nel mio caso, si trattava di un tag opzionale, che non può essere spostato in vista. Come tale, ti consiglio di provare $('#yourid') per vedere se ci sono tag inaspettatamente con lo stesso ID.

5

Quello che ho trovato che ha funzionato per me in merito allo stesso problema solo con Chrome *, era NON racchiudere l'id di ancoraggio all'interno di un elemento a livello di blocco MA racchiudere la chiamata.

ex.

<body> 
    <a id="top" name="top"> </a> 
    <p>...</p> 
    <p><a href="#top">Back to Top</a></p> 
    </body> 
    <!-- /end ex. --> 

Spero che questo aiuti :) funziona in tutti i browser.

-Ben

+2

Vorrei aggiungere che per conformarsi alla convalida W5C HTML5, è necessario rimuovere l'attributo name, poiché è obsoleto in HTML5. –

0

Ho passato le ultime ore a questo problema, in pagina tag di ancoraggio a lavorare in Firefox e IE, ma non Chrome. Non sono uno sviluppatore professionista, quindi non so perché, ma sembra che in alcuni casi chrome non legga i tag all'interno di div ammucchiati e ti consegni in un posto desiderato sulla stessa pagina. Ho ottenuto intorno ad esso con l'aggiunta di uno span id dopo il mio un id ... - in modo che appaia in questo modo:

<a href="#ID_NAME"></a> 
... 
<a id="ID_NAME><a/><span id="ID_NAME"></span> 

testato in Firefox, Chrome e Safari. Non ho IE su questa macchina per testare però.

+1

Questa dovrebbe essere una domanda a parte (non una risposta in modo da ottenere alcuni downvotes (non ho il rappresentante di downvote), ma nel tuo caso hai id duplicati ("ID_NAME" - che dovrebbe essere in ogni caso minuscolo) e non avere una citazione di chiusura dopo l'id per la a. –

0

Un altro possibile problema che può accadere con questo (anche se probabilmente non è il caso qui) è che avresti potuto alterare la dichiarazione del puntatore css per un tag es.

a { 
    cursor: default; 
} 

Se questo è il caso, tuttavia, gli effetti al passaggio del mouse e il clic sul collegamento dovrebbero continuare a funzionare.

0

Sembra sciocco ma una volta ho avuto lo stesso problema. Ho appena inserito i link di ancoraggio in una pagina esistente come parte del miglioramento. Stranamente i collegamenti sono selezionabili in IE ma non in chrome/firefox.

Osservando attentamente, ho trovato che esiste uno script esistente che rimuove il collegamento del tag di ancoraggio per la funzionalità di stampa. I tag di ancoraggio aggiunti fanno parte della stessa pagina e quindi presentano questo problema. Ho aggiunto la condizione con ID di ancoraggi appena aggiunti in modo che ignorino la funzionalità aggiunta per rimuovere i collegamenti di ancoraggio.

1

non mettere il carattere # all'ancora, solo nel collegamento

Correct <a name="top">[top of page]</a> <a link="#top">[link]</a> 

Incorrect <a name="#top">[top of page]</a> <a link="top">[link]</a> 
0

Per Firefox, applicare questo script nella sezione HEAD della pagina.

<script> 
    $(document).ready(function(){ 
     var h = window.location.hash; 
     if (h) { 
      var headerH = $('#navigationMenu').outerHeight(); 
      $('html, body').stop().animate({ 
       scrollTop : $(h).offset().top - headerH + "px" 
      }, 1200, 'easeInOutExpo'); 

      event.preventDefault(); 
     } 
    }); 
</script> 

Per Chrome, utilizzare quanto segue nella sezione HEAD della pagina.

<script> 
    $(document).ready(function() { 
     var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 
     if (window.location.hash && isChrome) { 
      setTimeout(function() { 
       var hash = window.location.hash; 
       window.location.hash = ""; 
       window.location.hash = hash; 
      }, 300); 
     } 
    }); 
</script> 

Basta copiare e incollare ENTRAMBI gli script nella sezione HEAD della pagina. Ha funzionato per me! :)

1

Ho riscontrato un problema simile in Chrome, in cui il mio cursore non si modificava in una mano puntante quando passava il mouse sopra i miei link di navigazione, e i collegamenti stessi non rispondevano quando cliccato. Aggiungendo la proprietà z-index con un valore di 999 al mio elemento di ancoraggio nel mio foglio di stile, è stato restituito il comportamento previsto.

Problemi correlati