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 :2 пикселя дополнительно
• IE9 :0,26 пикселя дополнительно
• Chrome :0 пикселей дополнительно.

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

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