I've got a problem with Chrome.
I'm trying to vertically-align some div
elements 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?
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/