Rimuovi lo spazio bianco dall’immagine

per favore dai un’occhiata a questo violino:

http://jsfiddle.net/cX47v/1

Sto semplicemente cercando di preservare l’effetto che vedi, ma voglio rimuovere lo spazio bianco sotto l’immagine. So di display: block, ma se lo faccio, l’effetto hover non funziona. Qualche idea su come risolverlo?

Cambiando il codice HTML in quello che ho di seguito (aggiungendo lo style="font-size:0" ) corregge il problema in Chrome, Firefox, IE9 e Safari. Ho visto questo problema prima, in cui un browser assume una riga di testo come un’altezza extra, anche dove non c’è testo visibile.

 

inserisci la descrizione dell'immagine qui

Puoi vederlo funzionare qui: http://jsfiddle.net/jfriend00/8FkmG/ . Lo spazio bianco rimanente attorno all’immagine è controllato dal padding nel tuo codice HTML.

Nel complesso, il tuo codice HTML / CSS è davvero fasullo qui mescolando float, posizionamento e posizionamento su una campata. Molto strano.

Imposta line-height:0; nella tua ombra div.

cambia semplicemente la class .fade

 .fade {font-size:0px; background: url('http://james.linnegar.com/demos/js/win7/hover.png'); }