Div ottiene altezza supplementare per nessun motivo

Question

ho un po 'di markup in questo modo:

<div class="account-picture"> 
    <img src="http://i.imgur.com/Mcr3l.png"> 
</div> 

Le div bisogno di essere galleggiare sinistra. L'immagine è 128px x 128px.

E alcuni css:

.account-picture{ 
    float: left; 
    background: #FFFFFF; 
    padding: 10px; 
    border: 1px solid red; 
    font-size: 1px; 
    overflow: hidden; 
} 

img{ 
    border: 1px solid #F8F8F8; 
    overflow: hidden; 
} 

Ma il problema è sembra che ci sia una certa altezza supplementare assegnato al div. I diagrammi di layout da Firebug sono i seguenti:

Perché è l'altezza del div ottenere 2 pixel in più? Perché varia da un browser all'altro?

• Firefox 12: 2px più
• IE9: 0.26px più
• Chrome: 0px supplementare.

Ed ecco un violino: http://jsfiddle.net/mWe5Y/

Perché succede questo, e come faccio a sbarazzarsi di quel qualcosa in più "altezza"?

Answer 1

Perché img è un elemento in linea.

di sbarazzarsi di quella altezza in più:

.account-picture img { 
    display: block; 
}