CSS встроенный блок, создающий дополнительное пространство между двумя вертикальными divs

Question

У меня есть несколько div (class="badge") для отображения в вертикальной плоскости. Не уверен, почему я получил дополнительное пространство между 2 div в FF и IE (Chrome работает отлично).

Мне нужно, чтобы они отображали либо пространство, либо равное пространство во всех браузерах.

http://jsfiddle.net/2hxak/1/

HTML:

<div class="stat-badges"> 
    <div class="badge"> 
     <div class="stat-num">123456</div> 
    </div> 
    <div class="badge"> 
     <div class="stat-num">0</div> 
    </div> 
</div> 

CSS:

.stat-badges { 
    text-align: center; 
    width: 55px; 
} 
.badge { 
    display: inline-block; 
    padding: 2px 4px; 
    color: #ffffff; 
    vertical-align: baseline; 
    white-space: nowrap; 
    background-color: #999999; 
} 
.badge .stat-num { 
    max-width: 30px; 
    min-width: 20px; 
    padding: 3px 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

пространство исчезает, если удалить overflow: hidden;. Я сохраняю overflow: hidden с ellipse, чтобы обрезать длинный текст.

Answer 1

Изменить vertical-align: baseline; на vertical-align: top; в правиле вашего правила.

jsFiddle example

Answer 2

display: inline-block; Мессинг это. Вместо этого используйте float: left; (возможно, с clear: left;, чтобы убедиться, что каждый значок находится на новой строке). (jsFiddle)