格大小Chrome和Firefox

我運行到與文本DIV在Firefox和Chrome佔據空間的方式一個有趣的問題之間的不一致。我有一個水平擴展的條形圖，每個條形都是由一個垂直條和一個下面的標題組成的。格大小Chrome和Firefox

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

基本上，我需要的標題欄的高度總是相同，或者酒吧將對不準。有趣的是，這似乎在Firefox中工作得很好：

firefox

但它是一個在Chrome不走：

chrome

我懷疑的基礎上，用數字擺弄， Firefox中最小高度的行爲與Chrome中的最小高度有所不同：

在Firefox中，將最小高度降至3em以下將會取消e不需要它的標題div的額外行，錯誤地排列它們上面的小節。
在鉻改變最小高度只用於推下滾動條靠近或furtheraway。帶有酒吧+標題的div不以任何方式相對於彼此移動。

究竟這是怎麼回事？我是否可能以錯誤的方式達到標題欄的「最小高度」效果？有更多的跨瀏覽器友好的方法嗎？

非常感謝！

編輯：

的jsfiddle按照大衆的需求：http://jsfiddle.net/YJHrY/4/

來源

2013-02-11 Alexandr Kurilin

Firefox和Chrome瀏覽器是什麼版本的什麼版本？ – 2013-02-11 04:12:41

火狐18.0.2從默認的典型回購和Chrome版本24.0.1312.69來自同一個地方。 – 2013-02-11 04:14:22

你可以撥弄你的代碼嗎？ – 2013-02-11 04:14:47

正如我認爲，您使用的inline-block的值的顯示特性，這些默認對齊上下。
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; 
}

來源

2013-02-11 04:41:00

+1。非常好.. – 2013-02-11 04:43:27

這似乎是做的伎倆，非常感謝。你碰巧知道爲什麼Firefox沒有顯示出這個問題？ – 2013-02-11 04:48:25

不是，但Webkit瀏覽器對於遵循規則更加一致，這一定是原因。 – 2013-02-11 04:57:43

格大小Chrome和Firefox

回答

相關問題