2010-09-24 20 views
11

(antes de empezar debo decir que sí, he hecho todas las comprobaciones estupidez, si el enlace está en mi historia y ha sido visitado etc)Google Chrome A: imagen de fondo no funciona visitado

estoy usando Chrome versión 6.0.472.63, aunque es importante que esto funcione en todos los navegadores.

Funciona en Firefox, IE y Opera.

Básicamente, lo único que intento hacer es cambiar la imagen de fondo de un enlace si el enlace ha sido visitado.

He hecho muchas pruebas de prueba y error tan desnudo para varios ejemplos.

Esto es lo que tenía originalmente

 
.forum_box .title a { 
background-image:url(../images/f_unread.png); 
background-position:10px center; 
background-repeat:no-repeat; 
background-color:transparent; 
color:#2D4054; 
font-size:14px; 
padding:10px 12px 10px 44px; 
text-decoration:none; 
display:block; 
font-weight:bold; 
} 
.forum_box .title a:visited { 
background-image:url(../images/f_read.png); 
} 

Obras en todos los navegadores excepto Chrome. Luego probé simplemente hacer un color en lugar de una imagen.

mismo otra vez, sin embargo, me cambió el enlace a #fff en lugar de transparente y el enlace visitado cambió de color rojo, por lo que aparentemente el color bg sólo funciona si se establece un color de BG para el padre.

 
.forum_box .title a { 
background-image:url(../images/f_unread.png); 
background-position:10px center; 
background-repeat:no-repeat; 
background-color:#fff; 
color:#2D4054; 
font-size:14px; 
padding:10px 12px 10px 44px; 
text-decoration:none; 
display:block; 
font-weight:bold; 
} 
.forum_box .title a:visited { 
background-color:red; 
} 

Sin embargo, todavía no resuelve mi problema de imagen. Así que en un último intento intenté con la esperanza de que, por alguna razón, Chrome solo funcionaría cuando las mismas propiedades estuvieran presentes en ambos.

 
.forum_box .title a { 
background:#fff url(../images/f_unread.png) no-repeat 10px center; 
color:#2D4054; 
font-size:14px; 
padding:10px 12px 10px 44px; 
text-decoration:none; 
display:block; 
font-weight:bold; 
} 
.forum_box .title a:visited { 
background:#fff url(../images/f_read.png) no-repeat 10px center; 
} 

Eso no funcionó y de nuevo continuó trabajando en Firefix, Opera e IE. Así que vine aquí a Stack Overflow muy confundido.

¡Cualquier ayuda sería muy apreciada!

ACTUALIZACIÓN: He intentado una solución jQuery, aunque todavía no funciona. A pesar de tener: enlaces visitados y puedo confirmar su estado visitado cambiando el color de la fuente a rojo. jQuery ('a: visited'). longitud devuelve 0.

+0

¿Se puede jsfiddle esto? –

+0

Eso sería posible, por ejemplo, podría hacer jQuery ('. Forum_box .title a: visited'), addClass ('visitado') y luego usar la clase para diseñar. Pero asumí que habría otra solución en lugar de que Chrome tuviera defectos intrínsecos en una de las propiedades de CSS más antiguas y más básicas. – robjbrain

+0

Sé que esto no resuelve su problema en este momento, pero siempre puede enviar un error ... http://code.google.com/p/chromium/issues/entry – EJC

Respuesta

12

Mismo problema aquí. Cambiar la posición de fondo en un CSS Sprite en: visited me funciona en Firefox 3.6 pero no en Chrome 6.

Pero probablemente pronto también dejará de funcionar en Firefox. (Tal vez por FF 4?)

Es un problema de privacidad, y se puede leer aquí un artículo de Mozilla al respecto (marzo de 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ Y el error: https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160

creo que sólo es posible solución es utilizar creativamente el color de fondo en lugar de imágenes.

+0

No creo que el color de fondo funcione. AFAIK el selector entero: visitado se ignorará por completo. –

0

Es posible que necesite sus comillas simples alrededor de su img url ... Los navegadores son divertidos cuando les importan las comillas y cuando no ...

+0

¡Eso no hizo ninguna diferencia, pero gracias por la sugerencia! – robjbrain

+0

Lo siento, no fue más útil, parece un problema muy extraño. Como dije antes, presentaría un error en el proyecto web de cromo y creo que solucionarían algo así rápidamente, ya que es una funcionalidad básica de html/css. – EJC

3

Probablemente sea un problema de seguridad.
Compruebe esto post en el blog de seguridad de mozilla.
Ciertamente puedo imaginar cómo lo harían.

Cuestiones relacionadas