can3p (can3p) wrote,
can3p
can3p

Internet Explorer 6 и центрирование блоков

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

Вот и сейчас удар пришел с неожиданной стороны, засада оказалась в теге body

Рассмотрим безобидный код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <style>
  * {
   padding: 0px;
   margin: 0px;
 
  }
   BODY {
      width: 600px;
      margin: 0 auto;
   }
 
   .test {
      background: red;
      position: relative;
   }
  </style>
  </head>
  <body>
   <div class="test">
абв
   </div>
  </body>

Здесь живьем.

Простой красный блок, центрируем. В ослике все тоже хорошо до тех пор, пока мы не попытаемся изменить размер окна. Что происходит? Блок div.test просто остается на месте! А при следующем обновлении страницы вновь перемещается, как надо. При этом браузер искренне считает, что блок перемещается, в соответствии с этим появляются и исчезают линейки прокрутки. Как показали эксперименты, исправить ситуацию может добавление ненулевого сдвига в любом направлении в процентах (и только в них).

.test2
{
    left: 0.01%
}

Здесь живьем.

Подобное поведение наблюдалось при всех доктайпах, переводящих броузер в режим соответствия стандартам.

Похожую картину удавалось наблюдать, если задаться целью отцентрировать блок по вертикали. К сожалению, в момент подготовки поста воспроизвести баг не удалось. Как только соображу, как это все ломается, сразу добавлю в пост.


Оригинал: http://blog.dpetroff.ru/tech/ie6-block-centering
Tags: body, bug, ie6, position, relative
Subscribe

  • Из прочитанного^Wнедочитанного. Выпуск 57

    Давно не писал, напишу экспрессом. 1) A geek in Japan, Hector Garcia 3 / 5 Много где упоминаемая книга про Японию и Японцев глазами экспата.…

  • Про программирование, выпуск 6

    Корректность На самом деле корректный код писать довольно просто, если придерживаться нескольких правил: Проверка данных на входе Правильная…

  • Вы, конечно, шутите

    Читаю книжку Фейнмана "Вы, конечно, шутите, мистер Фейнман", очень интересно наблюдать образ мышления человека, который ко всему подходил с точки…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 6 comments