CSS內嵌塊導致2個垂直格之間有額外空間

Question

我有幾個div（class="badge"）要在垂直顯示。不知道爲什麼我在FF和IE的2 div之間獲得額外的空間（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：如果我刪除overflow: hidden;

.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和ellipse以裁剪長文本。

Answer 1

更改vertical-align: baseline;到vertical-align: top;在您的徽章級規則。

jsFiddle example

Answer 2

display: inline-block;是搞亂這件事。改爲使用float: left;（可能使用clear: left;確保每個徽章都在新行中）。 （jsFiddle）