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 を変更しても、下のスクロールバーを近づけたり遠ざけたりするだけです。バー + タイトルの div は、互いに関連して移動しません。

ここで何が起こっているのですか？おそらくタイトルブロックの「最小高さ」効果を間違った方法で達成していますか? よりクロスブラウザフレンドリーなアプローチはありますか?

どうもありがとう！

編集：

一般的な要求に応じた JSFiddle: http://jsfiddle.net/YJHrY/4/

4

1 に答える 1

2

私が想定したように、inline-blockの値を持つdisplayプロパティを使用しています。これらは、デフォルトで下に配置されています。
http://jsfiddle.net/YJHrY/5/

.verticalChart .singleBarにvertical-align：topを追加します

.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 に答える