Blok w linii prostej nie wyrównuje pionowo elementów div

Question

Mam problem z Chrome.

Próbuję wyrównać w pionie niektóre elementy div przy użyciu display: inline-block; zamiast ich unoszenia. Problem pojawia się, gdy umieszczam w nich trochę tekstu: z dziwnego powodu Chrome wyświetla różne wypełnienia divs na różnych liniach.

Firefox i IE działają poprawnie. Dla lepszego zrozumienia sprawdź this example

Jak mogę tego uniknąć?

Answer 1

Trzeba dodać do globalnego owinięcia font-size: 0; i ustawić normalnym rozmiarze czcionki dla swoich bloków inline, można również dodać: letter-spacing: 0; i word-spacing: 0;, coś jak to:

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

i przykładowy skrzypce: http://jsfiddle.net/3ab22/ i aktualizowane skrzypce: http://jsfiddle.net/3ab22/3/