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

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

24 голосов
/ 01 сентября 2009

Во всех браузерах, которые я использовал, кроме 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>

Ответы [ 6 ]

24 голосов
/ 01 сентября 2009

Объявить тип документа. Я рекомендую вам использовать тип документа HTML5: 

<!DOCTYPE html>
19 голосов
/ 28 января 2010

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

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

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

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

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

13 голосов
/ 01 сентября 2009

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

Попробуйте этот тип документа: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
6 голосов
/ 24 апреля 2013

Я всегда использовал тип документа HTML5, но в моем случае единственная проблема заключалась в том, что родительскому элементу требовалось "position :lative;" специально установлено. после этого все работало отлично.

2 голосов
/ 12 декабря 2011

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

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

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

0 голосов
/ 13 марта 2018

Microsoft говорит:

В большинстве случаев мы рекомендуем, чтобы веб-сайты использовали тип документа HTML5 поддерживать самые разнообразные установленные и новые стандарты, а также самый широкий спектр веб-браузеров. Этот пример показывает, как указать тип документа HTML5.

Подробнее Информация

...