Css chrome和firefox之间的div大小不一致

我遇到了一个有趣的问题，在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>

我基本上需要的标题栏的高度始终是相同的，否则酒吧将错位。有趣的是，这在Firefox中似乎运行良好：

但这是一款禁止使用的Chrome：

基于对数字的篡改，我怀疑Firefox中的min-height与Chrome中的min-height行为不同：

• 在Firefox中，将最小高度降低到3em以下将删除标题div中不需要的额外行，从而错误地对齐上方的栏
• 在Chrome中，更改最小高度仅用于将下方的滚动条推近或推远。带有条+标题的div不会以任何方式相互移动

这到底是怎么回事？我是否以错误的方式实现标题栏的“最小高度”效果？是否有一种更为跨浏览器友好的方法

非常感谢

编辑：

---

jsiddle根据流行的需求：

正如我所想，您使用的显示属性的值为inline block，默认情况下这些属性与底部对齐。

将垂直对齐：顶部添加到.verticalChart.singleBar

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

---

什么版本的Firefox和什么版本的Chrome？默认的Canonical repo版本的Firefox 18.0.2和同一位置的Chrome版本24.0.1312.69。你能修改你的代码吗？@Cadence96:当然！请确保将右窗格向左移动足够大的距离，以便在Chrome上重现此问题。这似乎可以解决问题，非常感谢。你知道为什么Firefox没有显示这个问题吗？不知道，但是Webkit浏览器在遵守规则方面更加一致，这一定是原因。听起来不错，谢谢！我只需要记住，在重要的情况下，最好具体说明我需要什么对齐方式，而不是让浏览器决定。在处理内联/内联块相关元素时，只需要具体说明对齐方式。

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