div размер несовместим между chrome и firefox

Question

У меня возникает интересная проблема в том, как DIV с текстом занимает пространство в Firefox и Chrome. У меня есть гистограмма, которая расширяется горизонтально, каждый бар сделан из вертикальной полосы и заголовка внизу.

<div class="verticalChart"> 
    <div class="singleBar"> 
    <div class="bar"><!-- contents set by javascript, equal size for all bars--></div> 
    <div class="title">What is a fraction</div> 
    </div> 
    <div class="singleBar"> 
    <div class="bar"></div> 
    <div class="title">Unit Fractions on Number Line</div> 
    </div> 
[...] <!-- more bars --> 
</div> 

У меня есть следующий CSS применяется к заголовкам ниже каждому из столбцов, чтобы убедиться, что их дно в том же у координат. Я позволяю тексту занимать не более 3 строки, после чего переливается за пределами видимой коробки:

.verticalChart .singleBar .title { 
    font-size: 10px; 
    line-height: 1.0em; 
    min-height: 3.0em; 
    max-height: 3.0em; 
    overflow: hidden; 
    margin-top: 5px; 
    text-align: center; 
    white-space: normal; 
} 

Я в основном нужна высота заголовка блока, чтобы всегда быть таким же, или бруски будут смещен. Что интересно, что это, кажется, работает нормально в Firefox:

, но это не годен на Chrome:

Мое подозрение, основанное на возился с номерами, заключается в том, что min-height в Firefox действует по-разному от минимальной высоты в Chrome:

• В Firefox снижается минимальная высота ниже 3м удаляется e дополнительные строки из заголовков разделов, которые не нужны, неправильно выравнивают столбцы над ними.
• В минимальной высоте, изменяющейся в Chrome, служит только для того, чтобы проталкивать полосу прокрутки ниже поближе или в сторону фар. Div с заголовком bar + не перемещается по отношению друг к другу каким-либо образом.

Что именно происходит здесь? Возможно, я ошибаюсь в достижении эффекта «минимальной высоты» титульного блока? Есть ли более кросс-браузерный подход?

Большое спасибо!

Edit:

JSFiddle согласно многочисленным просьбам: http://jsfiddle.net/YJHrY/4/

Answer 1

Как я предполагал, вы используете дисплей свойство со значением инлайн-блока, те по умолчанию выравниваются по нижней части.
http://jsfiddle.net/YJHrY/5/

Добавить вертикальный выравнивать: верх к вашему .verticalChart .singleBar

.verticalChart .singleBar { 
    /* FrontRow Edits */ 
    width: 4.4%; 
    display: inline-block; 
    margin:0 1% 0% 1%; 
    float: none; 
    vertical-align: top; 
}