Div получает дополнительную высоту без причины

У меня есть такая разметка:

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

div нужно поместить влево. Изображение составляет 128 пикселей x 128 пикселей.

И некоторые 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;
}

Но проблема в том, что, кажется, какая-то дополнительная высота, назначенная div. Схемы компоновки из firebug следующие:

Почему высота div получает 2 дополнительных пикселя? Почему это зависит от браузеров?

Firefox 12: 2px extra
IE9: 0,26px дополнительно
Chrome: 0px дополнительно.

И вот скрипка: http://jsfiddle.net/mWe5Y/

Почему это происходит, и как мне избавиться от этой дополнительной "высоты"?

Ответ 1