div 크기가 크롬과 파이어 폭스간에 일치하지 않습니다.

Question

Firefox 및 Chrome에서 텍스트가있는 DIV가 공간을 차지하는 방식에 흥미로운 문제가 있습니다. 나는 수평으로 확장하는 막 대형 차트를 가지고, 각 막 대형은 수직 막대와 제목 아래에 만들어집니다.

<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> 

아래 막대가 동일한 y 좌표에 있는지 확인하기 위해 각 막대 아래 제목에 다음 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; 
} 

나는 기본적으로 항상 동일하게 제목 블록의 높이를 필요로하거나 바는 잘못 정렬됩니다.

하지만 크롬에 결코-가는 것입니다 : 흥미로운 것은이 파이어 폭스에서 잘 작동하는 것 같다이다

내 의심, 숫자와 하구에 따라, 파이어 폭스의 최소 높이가 Chrome의 최소 높이와 다르게 작동한다는 것입니다.

• Firefox에서 3em 미만의 높이를 줄이면 그 (것)들 막대기를 mis-aligning, 그것을 필요로하지 않는 제목 divs에서 여분 선.
• Chrome에서 분 높이 변경은 스크롤 막대를 아래 또는 아래쪽으로 밀기위한 용도로만 사용됩니다. bar + title이있는 div는 어떤 식 으로든 서로 움직이지 않습니다.

정확히 여기 무슨 일이 일어나고 있습니까? 아마도 제목 블록의 "최소 높이"효과가 잘못된 방식으로 달성하고 있습니까? 브라우저 간 친화적 접근 방식이 더 많습니까?

감사합니다.

편집 :

JSFiddle 인기 수요에 따라 : http://jsfiddle.net/YJHrY/4/ 내가 생각으로

Answer 1

, 인라인 블록의 값으로 표시 속성을 사용하고, 기본적으로 사람들은 위에서 아래로 정렬됩니다. 당신의 .verticalChart .singleBar

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