vertical alignment - Inline-block not vertically aligning div-elements correctly -


i've got problem chrome.

i'm trying vertically-align divelements 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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -