2

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

预期成绩

预期成绩

火狐 2 错误

火狐漏洞

4

3 回答 3

1

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

删除 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 中删除溢出：自动。

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

于 2009-05-28T02:27:49.240 回答