Firefox 1.5 和 2 css 绝对位置错误答案

【问题标题】：Firefox 1.5 and 2 css absolute position bugFirefox 1.5 和 2 css 绝对位置错误
【发布时间】：2010-10-29 10:37:51
【问题描述】：

我有以下 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 中，底部元素位于内容元素的底部。我不知道为什么会这样，任何帮助将不胜感激。

预期结果

Firefox 2 错误

【问题讨论】：

标签： css firefox firefox2

【解决方案1】：

要么起飞

 float: left.

或者尝试改变

 bottom: 0

到

 top: 100%;

【讨论】：

【解决方案2】：

我能够找到解决方法，但我仍然不明白出了什么问题。我的解决方法不是灵丹妙药，但它适用于我的情况。

删除 IE 的最小高度工作似乎使它做正确的事情。这个解决方案的问题是，如果内容元素比高度大，溢出的内容会出现滚动条。

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

【讨论】：

这个问题在火狐以后的版本中依然存在。我在 Ubuntu 14.04 上使用 v41，我可以让 DIV 移动到底部的唯一方法是拿起容器并在上面放一个浮子。幸运的是，无论如何，它是一个正确的列，所以我只是添加了“float:right”，奇迹般地问题得到了解决。确实很奇怪。与其他浏览器相比，FF 如此奇怪，即使在使用了 normalize.css 之后也是如此。

【解决方案3】：

从#wrapper 中删除溢出：auto。

众所周知，混合浮动和绝对定位对于所有浏览器来说都很难做到——它们似乎都实现了自己的小怪癖。

【讨论】：