Inline-block not vertically aligning div-elements correctly

Question

I've got a problem with Chrome.

I'm trying to vertically-align some divelements using display: inline-block; instead of floating them. The problem occurs when I put some text into them: for a strange reason, Chrome displays differently filled divs onto different lines.

Firefox and IE are working correctly. For better understanding check this example

How can I avoid this?

Answer 1

You need to add for global wrapper font-size: 0; and set regular font size for your inline blocks, you can also add: letter-spacing: 0; and word-spacing: 0;, something like this:

.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;
  }

and example fiddle: http://jsfiddle.net/3ab22/ and updated fiddle: http://jsfiddle.net/3ab22/3/