Question

我遇到Chrome问题。

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

Firefox和IE正常运行。为了更好地理解，请检查this example

我该如何避免这种情况？

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/

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

1 个答案: