En varias ocasiones me he encontrado con este problema, así que igual puede sacar de apuros a más de uno.
Podemos tener en CSS una pseudo-clase para poner un color de fondo en los enlaces:
a:hover { background-color: red; }En enlaces textuales todo es correcto (tal y como se espera)
<a href="#">enlace de texto</a>
Sin embargo en los enlaces con imágenes sucede «algo extraño» apareciendo el color fondo en la zona inferior de la imagen cuando se activa el evento hover (nos situamos encima del enlace con el cursor).
<a href="#"><img src="#" alt="" /></a>
El problema no radica en un posible margin, padding ni tan siquiera line-height.
Después de varias pruebas deduzco que el problema viene del vertical-align.
Una buena solución es la de atacar directamente a la alineación vertical de la imagen que se encuentra dentro del enlace.
a img {
vertical-align: bottom;
background-color: #FFF;
}
Pienso que esta solución es bastante simple y relativamente compatible con varios navegadores.
La alineación vertical bottom soluciona el problema de los pixeles sumados a la zona inferior de la imagen por intervención del enlace. Otros tipos de vertical-align también pueden corregirlo, no obstante la propiedad bottom es ampliamente reconocida por los navegadores.
Por otro lado la propiedad background-color debe tener el mismo color que el fondo de la página web y su misión es «tapar» el color de fondo provocado por la pseudo-clase a:hover. Esta instrucción es dada principalmente para aquellos navegadores que no interpretan adecuadamente el vertical-align.
Por último es importante atacar directamente al elemento a (enlace) para influir a todas las pseudo-clases y no únicamente a :hover puesto que de ser así provocaría un desplazamiento leve del contenido durante el evento.
