Как исправить абсолютное позиционирование в IE8?

В каждом браузере, который я использовал, кроме ie8, абсолютно позиционированный элемент можно расположить в соответствии с ближайшим родителем с относительным позиционированием.

В приведенном ниже коде показаны два div внутри таблицы. Верхний div имеет позицию: относительный, однако, вложенный, абсолютно позиционированный элемент не соблюдает свои границы (в ie8 он попадает в нижнюю часть страницы вместо нижней части родительского div).

Кто-нибудь знает об этом?

<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
  <tr>
    <td><div id="top"> Div with id="top"
        <div id="position_me"> Div with id="position me" </div>
      </div>
      <div id="bottom"> Div with id="bottom"
        <p>Lorem ipsum dolor sit amet.</p>
      </div></td>
  </tr>
</table>

Ответ 1

Объявить doctype. Я бы посоветовал вам использовать doctype HTML5:

<!DOCTYPE html>

Ответ 2

Добавьте это:

#top {
//height: 100%;
}
#position_me {
//left: 0;
}

Это заставляет IE8 правильно вычислять позицию в режиме quirks. Есть много способов получить это:

//zoom: 1;
//writing-mode: tb-rl;

См. http://haslayout.net/haslayout

Ответ 3

Это потому, что вы не используете тип документа. И IE работает в режиме "quircks" .

Попробуйте этот doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ответ 4

Я всегда использовал HTML-тип документа, но в моем случае единственная проблема заключалась в том, что родительскому элементу нужна "позиция: относительная"; специально установленный. после этого он работал отлично.

Ответ 5

Вы также можете использовать

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Это устранило мою проблему!