Firefox 1.5和2 css絕對位置錯誤

我有以下html/css導致Firefox 1.5和2的問題，但在IE6/7/8，Safari，Chrome，Opera和Firefox 1和3中正常工作。Firefox 1.5和2 css絕對位置錯誤

<!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中，底部元素位於內容元素的底部。我無法弄清楚爲什麼發生這種情況，任何幫助將不勝感激。

預期結果

Expected Results

Firefox 2的錯誤

Firefox Bug

來源

2009-05-27 Buddy

我能找到一個解決辦法，但我還是不明白什麼錯誤。我的解決方法不是一個銀彈，但它適用於我的情況。

爲IE刪除最小高度的工作似乎使它做正確的事情。這個解決方案的問題是，如果內容元素大於高度，那麼滾動條就會出現在溢出的內容上。

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

來源

2009-05-27 23:46:43 Buddy

問題在Firefox的更高版本中仍然存在。我在Ubuntu 14.04上使用v41，唯一可以讓DIV移動到底部的方法是取出容器並粘貼一個浮點。幸運的是，無論如何，這是一個正確的專欄，所以我只是添加了「float：right」，奇蹟般地解決了問題。確實很奇怪。即使在使用normalize.css之後，與其他瀏覽器相比，在FF上感到羞恥。 – Volomike 2016-04-21 06:22:59

要麼脫下

float: left.

或者嘗試改變

bottom: 0

到

top: 100%;

來源

2009-05-27 23:34:05

從#wrapper中刪除溢出：auto。衆所周知，混合浮動和絕對定位是所有瀏覽器都難以適應的 - 它們似乎都實現了自己的小怪癖。

來源

2009-05-28 02:27:49 Emily

Firefox 1.5和2 css絕對位置錯誤

回答

相關問題