2011-11-30 26 views
13

C'è qualche motivo per cui questo non funziona su Internet Explorer o Chrome:Perché non funziona questo: visitato lo stile css?

<html> 
    <head> 
     <style> 
      A {font-weight: bold; color:black;} 
      A:visited {font-weight: normal; color: black; } 
      .Empty {font-weight: bold; color: black; } 
     </style> 
    </head> 

    <body> 
     <a href="http://mysite">click me</a> 
    </body> 
</html> 

Il link clicco non va mai alla normalità e solo rimane in grassetto. Su alcuni altri altri browser funziona.

Modifica: la modifica del caso non ha avuto alcun effetto.

Modifica: la modifica di un collegamento a: a non ha avuto alcun effetto.

Modifica: il cambio di colore funziona, ma non il tipo di carattere.

Modifica: soluzione alternativa era quella di modificare l'accessibilità per ignorare i colori Web. Non ho accesso alla fonte, quindi ho dovuto farlo in questo modo.

+0

Assicurarsi che i vostri selettori sono minuscole prima. Potrebbe aiutare. a: visited {stuff} – Fredy31

+0

Giusto per respingere qualsiasi idea che si tratti di un caso, è questo che funziona per te ?: http://jsfiddle.net/3aHC9/ –

risposta

29

In realtà, questo non ha nulla a che fare con la distinzione tra maiuscole e minuscole. Questa è una funzione di sicurezza. La funzionalità dello pseudoclass :visited è stata limitata in molti browser moderni (Fx4, IE9, Chrome) per impedire l'exploit CSS: leggere a riguardo lo here.

Al giorno d'oggi, getComputedStyle() in questi browser in genere restituisce valori per i collegamenti visitati come se non fossero stati visitati. Tuttavia, posso semplicemente immaginare l'elusione di quello: usando font-weight per i link visitati, la larghezza dell'elemento cambia in modo tale che i browser che consentirebbero di modificare i collegamenti font-weight per :visited non risolverebbero effettivamente il buco di sicurezza.

Pertanto, non esiste alcuna soluzione per questo problema.

+0

consisteva nel modificare l'accessibilità per ignorare i colori Web. Non ho accesso alla fonte, quindi ho dovuto farlo in questo modo. – johnny

0

Forse prova a cambiare l'attributo color e vedere se ha un effetto.

Per la risoluzione dei problemi, è possibile provare a utilizzare gli strumenti di sviluppo in chrome per vedere quale stile viene applicato.

+0

Ho messo il rosso e lo ha fatto cambiare. Ma il peso del font no. Grazie. – johnny

1

Lo stesso CSS non fa distinzione tra maiuscole e minuscole, ma se il file HTML che utilizza questo stile ha una dichiarazione XML e un doctype XHTML, il CSS non funzionerà, perché i tag fanno distinzione tra maiuscole e minuscole. Dovrai impostare i tag "a" in lettere minuscole.

spiegato qui: http://reference.sitepoint.com/css/casesensitivity

+0

L'unica cosa che trasforma il documento in XHTML è di tipo MIME, non doctype o dichiarazione XML. – duri

+0

@duri Se è così, allora è possibile che il suo server stia servendo file HTML con * application/xhtml + xml *. La soluzione –

0

È necessario disporre di dichiarazioni separate per a: link, a: visited, a: active, ecc

Rimuovere il primo stile che non contiene i due punti. È esagerato. Sostituisci con un: link.

0

Ho risolto questo problema per il mio sito Web salvando i collegamenti in un cookie o sessione e quindi aggiungendo manualmente una classe visitata al mio script di navigazione php. Basta fare un allineamento uri come questo:

//Script that loads on every page to save visited pages 
$_COOKIE['uris'] = array ('uri/page1', 'uri/page2', 'uri/page3'); 

//The below script must reside on every navigation script 
$uris = $_COOKIE['uris']; 
if(in_array($link['uri'], $uris) { 
    echo '<a class="visited" href="'.$link['uri'].'">'.$link['name'].'</a>'; 
} else { 
    echo '<a href="'.$link['uri'].'">'.$link['name'].'</a>'; 
} 
0

Il problema ha a che fare con la storia sniffing, cambiando proprietà CSS è disabilitato per i collegamenti visitati a causa di problemi di privacy.

Mi è venuta la seguente soluzione per raggiungere l'effetto desiderato. È possibile cambiare il colore di sfondo del link visitato.

La soluzione è molto semplice:

  1. impostare uno sfondo-immagine sul legame con la stessa altezza di collegamento e 1px di larghezza e ripetere l'immagine in orizzontale
  2. l'immagine ha lo stesso colore lo sfondo del collegamento
  3. fanno un pixel di tale immagine trasparente, in verticale mezzo
  4. on: stato visitato basta cambiare il colore di sfondo di quel link al testo-colore del collegamento
  5. Solo una linea del background-color wil essere visibile, perché l'immagine di sfondo è mascherarlo

Ecco un esempio:

a:link { 
    color:#000; 
    background:#FFF url('../img/linethrough.png') repeat-x top left; 
} 

a:visited { 
    background-color:#000; 
    color:#000; 
} 
Problemi correlati