行内块元素不能正确垂直对齐div元素

Question

我在Chrome浏览器中遇到了问题。

我正在尝试使用display: inline-block;而不是浮动它们来垂直对齐一些

元素。当我将一些文本放入其中时，问题就出现了：由于某种奇怪的原因，Chrome会将不同填充的

显示在不同的行上。

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

我该如何避免这种情况？

- Alex van

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/

- Lukas

---

我按照你的建议去做了。前三个元素的问题已经解决了，但最后几个还没有。这是链接：http://jsfiddle.net/pHCSx/14/ - Alex van

如果您有一些边距或填充，请添加:last-child规则并重置它们。 - Lukas

很抱歉，但这不是由于任何填充或边距造成的:(正如您在示例中所看到的那样，存在相同的问题 http://jsfiddle.net/3ab22/2/即使更改字体系列也无法改变DIV位置的行为。我只是想不出为什么会发生这种情况。 - Alex van

没错，vertical-align解决了问题！！ :) 我自己找到了解决方案，但由于我还是一个新手，无法回答这个问题。 不管怎样，感谢你的帮助！ - Alex van