2

Firefox 1.5 および 2 で問題を引き起こしている次の html/css がありますが、IE6/7/8、Safari、Chrome、Opera、および Firefox 1 および 3 では正常に動作しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Firefox Bug</title>
<style type="text/css">
  * { border: 0; padding: 0; margin: 0; }
  #wrapper {
    width: 500px;
    min-height: 550px;
    height: auto !important;
    height: 550px;
    border: 5px solid blue;
    position: relative;
    display: inline;
    overflow: auto;
    float: left;
  }
  #content {
    border: 5px solid green;
  }
  #bottom {
    border: 5px solid red;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 100px;
  }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="content">
      Foo
    </div>
    <div id="bottom">
      Bar
    </div>
  </div>
</body>
</html>

正常に動作しているブラウザーでは、bottom 要素がラッパー要素の右下に表示されます。ただし、Firefox 2 では、bottom 要素は content 要素の下部にあります。なぜこれが起こっているのかわかりません。どんな助けでも大歓迎です。

予想された結果

予想された結果

Firefox 2 のバグ

Firefox のバグ

4

3 に答える 3

1

回避策を見つけることができましたが、何が問題なのかまだわかりません。私の回避策は特効薬ではありませんが、私の状況ではうまくいきます。

IE の min-height 回避策を削除すると、IE は正しいことを行うようです。このソリューションの問題は、コンテンツ要素が高さよりも大きい場合、オーバーフローしたコンテンツに対してスクロール バーが表示されることです。

#wrapper {
  width: 500px;
  height: 550px;
  border: 5px solid blue;
  position: relative;
  display: inline;
  overflow: auto;
  float: left;
}
于 2009-05-27T23:46:43.200 に答える
0

脱ぐか

 float: left.

または変更してみてください

 bottom: 0

に

 top: 100%;
于 2009-05-27T23:34:05.987 に答える
0

#wrapper から overflow:auto を削除します。

フロートと絶対位置を混在させることは、すべてのブラウザーで正しく行うのが難しいことで有名です。それぞれ独自の小さな癖を実装しているようです。

于 2009-05-28T02:27:49.240 に答える