内联块未正确垂直对齐 div 元素答案

【问题标题】：Inline-block not vertically aligning div-elements correctly内联块未正确垂直对齐 div 元素
【发布时间】：2013-04-11 07:00:51
【问题描述】：

我的 Chrome 有问题。

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

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

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

【问题讨论】：

标签： vertical-alignment css

【解决方案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/

【讨论】：

我按照你的建议做了。对于前 3 个元素，问题已解决，但对于最后一个元素则没有。来看看jsfiddle.net/pHCSx/14
如果您有一些边距或填充，请为 :last-child 添加规则并重置它们
我很抱歉，但这不是因为任何填充或边距:(正如您在示例中看到的那样，存在同样的问题jsfiddle.net/3ab22/2 即使更改字体系列也会改变DIV 位置的行为。我只是不知道为什么会出现这种情况。
没错，垂直对齐成功了！ :) 我自己找到了解决方案，但无法回答这个问题，因为我还是新手。无论如何感谢您的帮助！