4

我遇到了一个有趣的问题，即带有文本的 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 应用于每个条形下方的标题，以确保它们的底部位于相同的 y 坐标处。我允许文本最多占用 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 上是不行的：

铬合金

基于摆弄数字，我的怀疑是 Firefox 中的 min-height 与 Chrome 中的 min-height 行为不同：

  • 在 Firefox 中，将 min-height 降低到 3em 以下将从标题 div 中删除不需要它的多余行，从而使它们上方的条不对齐。
  • 在 Chrome 中，更改 min-height 只会将下方的滚动条推得更近或更远。带有 bar + title 的 div 不会以任何方式相对于彼此移动。

这里到底发生了什么？我是否以错误的方式实现了标题栏的“最小高度”效果？是否有更跨浏览器友好的方法？

非常感谢！

编辑：

JSFiddle 根据大众需求：http: //jsfiddle.net/YJHrY/4/

4

1 回答 1

2

正如我所料，您正在使用值为 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-11T04:41:00.727 回答