css - CSS inline-block 导致 2 个垂直 div 之间的额外空间

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：

.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 示例

Answer 2

display: inline-block;搞砸了。改为使用float: left;（可能与clear: left;确保每个徽章都在新行上）。( jsFiddle )