簡體   English   中英

Firefox 1.5和2 CSS絕對位置錯誤

[英]Firefox 1.5 and 2 css absolute position bug

我有以下html / css在Firefox 1.5和2中引起問題,但在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>

在運行正常的瀏覽器中,底部元素顯示在包裝器元素的右下角。 但是,在Firefox 2中,底部元素位於content元素的底部。 我不知道為什么會這樣,任何幫助將不勝感激。

預期成績

預期成績

Firefox 2錯誤

Firefox錯誤

我能夠找到一種解決方法,但是我仍然不明白出了什么問題。 我的解決方法不是靈丹妙葯,但可以解決我的問題。

刪除IE的最小高度變通方法似乎可以使它做正確的事。 該解決方案的問題在於,如果content元素大於高度,則滾動條將針對溢出的內容出現。

#wrapper {
  width: 500px;
  height: 550px;
  border: 5px solid blue;
  position: relative;
  display: inline;
  overflow: auto;
  float: left;
}

要么脫下

 float: left.

或嘗試改變

 bottom: 0

 top: 100%;

從#wrapper中刪除overflow:auto。

眾所周知,對於所有瀏覽器來說,混合浮動和絕對定位都是很難做到的-它們似乎都實現了自己的小怪癖。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM