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

我的 Chrome 有问题。

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

Firefox 和 IE 工作正常。
为了更好地理解检查 this example

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

最佳答案

您需要为全局包装器 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;
  }

和示例 fiddle :http://jsfiddle.net/3ab22/
和更新的 fiddle :http://jsfiddle.net/3ab22/3/

关于vertical-alignment - 内联块未正确垂直对齐 div 元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16078283/