Question

我有以下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中，底部元素位于内容元素的底部。我无法弄清楚为什么会这样，任何帮助都会非常感激。

预期结果

Expected Results

Firefox 2 Bug

Firefox Bug

Answer 1

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

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

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

Answer 2

取下

 float: left.

或尝试更改

 bottom: 0

以

top: 100%;

Answer 3

从#wrapper中删除overflow：auto。

混合花车和绝对定位对于所有浏览器来说都是难以理解的 - 他们每个人似乎都在实施他们自己的小怪癖。

Firefox 1.5和2 css绝对位置错误

3 个答案: