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
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 6 comments