vertical-alignment - 内联块未正确垂直对齐 div 元素

Question

我的 Chrome 有问题。

我正在尝试使用 而不是浮动它们来垂直对齐一些div元素。display: inline-block;当我将一些文本放入其中时会出现问题：由于一个奇怪的原因，Chrome 显示不同的填充divs到不同的行。

Firefox 和 IE 工作正常。为了更好地理解检查这个例子

我怎样才能避免这种情况？

Answer 1

您需要添加全局包装器font-size: 0;并为内联块设置常规字体大小，您还可以添加：letter-spacing: 0;和word-spacing: 0;，如下所示：

.wrapper {
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}

  .wrapper .inline_block {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    word-spacing: .1em;
    vertical-align: top;
  }

和示例小提琴： http: //jsfiddle.net/3ab22/ 和更新的小提琴：http: //jsfiddle.net/3ab22/3/