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 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 6 comments