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

StackOverflow https://stackoverflow.com/questions/1360131

Вопрос

В каждом браузере, который я использовал, за исключением 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>
Это было полезно?

Решение

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

<!DOCTYPE html>

Другие советы

Добавь это:

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

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

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

Видеть http://haslayout.net/haslayout

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

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

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

Я всегда использовал Doctype HTML5, но в моем случае единственной проблемой было то, что родительский элемент нуждался в «позиции: относительно»; специально установлен.после этого все заработало отлично.

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

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

Это решило мою проблему!

Microsoft говорит:

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

Для большего Информация

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top