vertical alignment - Inline-block not vertically aligning div-elements correctly -
i've got problem chrome.
i'm trying vertically-align div
elements using display: inline-block;
instead of floating them. problem occurs when put text them: strange reason, chrome displays differently filled divs
onto different lines.
firefox , ie working correctly. better understanding check this example
how can avoid this?
you need add global wrapper font-size: 0;
, set regular font size inline blocks, can add: letter-spacing: 0;
, word-spacing: 0;
, 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/ , updated fiddle: http://jsfiddle.net/3ab22/3/
Comments
Post a Comment