2011-04-29 19 views
6

Acabo de notar algo raro, al crear un menú para un sitio web. Take a look at this Fiddle que ilustra el problema.css: hover error de color

Aviso la pequeña mancha de color naranja, a la derecha de la última carta cuando se pasa sobre el elemento de menú.
¿Por qué ocurre esto?

Puedo atenuar el "efecto naranja" al disminuir el contraste entre el fondo y el color de fondo, pero no resuelve el problema real. ¿Es esto un error, o hay una forma inteligente de solucionarlo?

estoy usando Chrome en una Mac por cierto. Me di cuenta de que no ocurre en Firefox, por lo que se trata de un problema relacionado con el navegador.

actualización
Gracias por las respuestas y sugerencias sobre cómo solucionarlo! Acepté la respuesta de Marcel ya que parecía ser la respuesta más correcta sobre por qué estaba ocurriendo. No sé si este es el caso, pero parece ser un problema de Webkit. Si nota el error en cualquier navegador que no sea webkit, dígalo y lo actualizaré.

+1

Está a 2 píxeles de alto y color '# 3a0000', raro ... pensé que era sólo mis ojos en un principio. Estoy en Windows 7 y lo vi en Chrome10 pero no en FF4. –

+1

Bastante seguro que tiene algo que ver con suavizado/suavizado de fuentes en el navegador, o tal vez cierta representación de fuentes que se expande más allá de su "tamaño de recuadro" y no está totalmente contenida en el delimitador por un "medio píxel" :) Parece podría ser un error para mí (aunque pequeño). Cómo descubrió que esto está más allá de mí ... –

+0

Es muy notable, cuando hay un gran contraste entre los colores. En el violín, he utilizado el negro como color de vuelo para ilustrar el problema, pero es fácil de notar con otros colores también. –

Respuesta

1

Es la fuente Calibri. Si cambias la fuente, debería desaparecer.

Actualización: Tal vez no sea la fuente en sí, pero cambiar a diferentes tipos de letra soluciona el problema.

+0

¿De dónde sacas esta explicación? Probé una fuente Impact solo para estar seguro y todavía estaba allí. Tenga en cuenta la parte en negrita de la pregunta '¿Por qué ocurre esto?' –

+0

Impact hace lo mismo. Prueba Arial o algo. – Alex

+0

Lo probé en algunas fuentes, y estaba allí en todas ellas. Además, cambiar la fuente no es una solución. –

5

Si agrega padding-right: 1px; a la li a, el punto naranja desaparecerá y le permitirá conservar la fuente.

En cuanto a por qué está ocurriendo, lo único que se me ocurrió fue que los dos píxeles de borde de la T se extendían más allá del borde de la caja del ancla. Al agregar el relleno, se expandió un poco la caja, pero parece bastante hackosa.

Si añade un color de fondo para anclar, se puede ver el borde de la T está fuera del fondo.