2011-11-30 14 views
13

¿Hay alguna razón para que esto no funciona en Internet Explorer o Chrome:¿Por qué no funciona este estilo a: css visitado?

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

El enlace hago clic nunca pasa a la normalidad y sólo se queda en negrita. En algunos otros navegadores funciona.

Editar: el cambio de estuche no lo afectó.

Editar: cambiar a a: el enlace no lo afectó.

Editar: el cambio de color funciona, pero no el peso de la fuente.

Editar: la solución fue cambiar la accesibilidad para ignorar los colores de la web. No tengo acceso a la fuente, así que tuve que hacerlo de esta manera.

+0

Asegúrese de que sus selectores son minúsculas en primer lugar. Podría ayudar. a: visited {cosas} – Fredy31

+0

Solo para descartar cualquier idea de que sea un problema de caso, ¿esta funciona para usted ?: http://jsfiddle.net/3aHC9/ –

Respuesta

29

En realidad, esto no tiene nada que ver con la distinción entre mayúsculas y minúsculas. Esta es una característica de seguridad. La funcionalidad de :visited pseudoclass ha sido restringida en muchos navegadores modernos (Fx4, IE9, Chrome) para evitar el uso de CSS: lea sobre él here.

Hoy en día, getComputedStyle() en estos navegadores generalmente retorna valores para los enlaces visitados como si ellos no fueron visitados. Sin embargo, simplemente puedo imaginar elusión de que: el uso de font-weight para los enlaces visitados, anchura cambios del elemento por lo que los navegadores que permite el cambio de font-weight:visited para enlaces no sería realmente solucionar el agujero de seguridad.

Por lo tanto, no hay ninguna solución para este problema.

+0

solución alternativa fue cambiar la accesibilidad para ignorar los colores web. No tengo acceso a la fuente, así que tuve que hacerlo de esta manera. – johnny

0

Quizás intente cambiar el atributo de color y ver si tiene algún efecto.

Para solucionar problemas, es posible que desee intentar utilizar las herramientas de desarrollador en cromo para ver qué estilo se aplica.

+0

Pongo rojo y lo cambió. Pero el peso de la fuente no. Gracias. – johnny

1

CSS en sí no distingue entre mayúsculas y minúsculas, pero si el archivo HTML que utiliza este estilo tiene una declaración XML y un doctype XHTML, ese CSS no funcionará, porque las etiquetas distinguen entre mayúsculas y minúsculas. Deberá establecer las etiquetas "a" en minúsculas.

se explica aquí: http://reference.sitepoint.com/css/casesensitivity

+0

Lo único que convierte el documento en XHTML es el tipo MIME, no doctype o declaración XML. – duri

+0

@duri Si es así, entonces es posible que su servidor esté sirviendo archivos HTML con * application/xhtml + xml *. –

0

Es necesario tener declaraciones separadas para a: link, a: visited, un activo, etc.

retire el primer estilo que no contiene dos puntos. Es primordial. Reemplace con un: enlace.

0

Resolví este problema para mi sitio web guardando los enlaces en una cookie o sesión y luego agregué manualmente una clase visitada a mi script de navegación php. Sólo hacer una matriz uri como esto:

//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

El problema tiene que ver con la historia sniffing, el cambio de las propiedades CSS está deshabilitado para los enlaces visitados debido a cuestiones de privacidad.

me ocurrió la siguiente solución para alcanzar el efecto deseado. Es posible cambiar el color de fondo del enlace visitado.

La solución es muy sencilla:

  1. establecer una imagen de fondo en el enlace con la misma altura que su enlace y 1px anchura y repetir la imagen horizontalmente
  2. la imagen tiene el mismo color que el fondo del enlace
  3. crear un píxel de la imagen transparente, en la vertical media
  4. en: estado visitado apenas cambia el backgroundColor de ese enlace al texto-color del enlace
  5. Sólo una línea del color de fondo Wil ser visibles, debido a que la imagen de fondo se enmascararlo

He aquí un ejemplo:

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

a:visited { 
    background-color:#000; 
    color:#000; 
} 
Cuestiones relacionadas