Firefox 1.5 и 2 css ошибка абсолютной позиции - PullRequest
Новая
       32

Firefox 1.5 и 2 css ошибка абсолютной позиции

2 голосов
/ 28 мая 2009

У меня есть следующий 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

Ответы [ 3 ]

1 голос
/ 28 мая 2009

Мне удалось найти обходной путь, но я до сих пор не понимаю, что происходит не так. Мой обходной путь - не серебряная пуля, но он подойдет для моей ситуации.

Удаление обхода минимальной высоты для IE, кажется, заставляет его делать правильные вещи. Проблема этого решения состоит в том, что если элемент содержимого больше высоты, для переполненного содержимого появятся полосы прокрутки. 

#wrapper {
  width: 500px;
  height: 550px;
  border: 5px solid blue;
  position: relative;
  display: inline;
  overflow: auto;
  float: left;
}
0 голосов
/ 28 мая 2009

Удалите переполнение: auto из # wrapper.

Смешивание чисел с плавающей точкой и абсолютное позиционирование общеизвестно трудно сделать правильным для всех браузеров - каждый из них, кажется, реализует свои собственные маленькие причуды.

0 голосов
/ 28 мая 2009

Либо сними 

 float: left.

Или попробуйте изменить 

 bottom: 0

до 

 top: 100%;
...