Position fixed в IE6

3 августа 2009, Написано в CSS

Так как IE6 не поддерживает значение fixed свойства position, обычно для эмуляции данного эффекта используют position:absolute и CSS expression. Однако в результате при скроллинге или изменении размеров окна браузера возникали небольшие подёргивания фиксированного блока.

#fixed{
  position:fixed;
  left:0;
  top:0
}
#fixed{ /* Стили для IE6 */
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop))
}

Видимо IE имеет несколько этапов рендеринга страницы. Сначала браузер заново перестраивает содержимое и уже после обрабатывает CSS выражения, что и приводит к подёргиваниям.

Решение заключается в том, чтобы добавить элементу html или body фоновое изображение. В результате браузер сперва обработает таблицу стилей, а после перерисует страницу. Это, в свою очередь, сделает перемещение фиксированного блока плавным.

В качестве значения background можно использовать about:blank.

html{
  background:url(about:blank)
}

11 комментариев к статье «Position fixed в IE6»:

  1. Nikita:
    6 Авг 2009 в 16:15

    Мне нравится такой вариант: http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
    И никаких expressions

    Ответить
  2. Тормоз:
    14 Авг 2009 в 04:35

    Я делал без всяких expression, не люблю такие штуки.
    Пример можно посмотреть на одном из моих заброшенных блогов – http://dummp.blogspot.com/
    P.S. Блог у тебя очень медленно открывается, надо хостинг менять, наверно.

    Ответить
    • Alex:
      14 Авг 2009 в 07:25

      За пример спасибо.

      P.S. Обычно блог достаточно быстро открывается, хотя иногда конечно бывают проблемы на хостинге.

      Ответить
  3. Smilerr:
    18 Авг 2009 в 16:37

    Прикольный шаблон на сайте. Откуда взяли? Мне кстать локализации от Гудвина нравятся. Советую

    Ответить
  4. Nataly:
    20 Авг 2009 в 17:51

    2Alex, взяла на заметку, хотя уже много перешло на восьмую версию, а в ней такой проблемы нет

    Ответить
  5. Надежда:
    23 Окт 2009 в 13:26

    Спасибочки, то, что нужно было :)

    Ответить
  6. gps:
    22 Ноя 2009 в 15:20

    А как в ИЕ 6 сделать 100% что бы он не вылезал за рамки …….

    Ответить
  7. mdbaner:
    30 мая 2010 в 18:41

    я вот нашел другой способ, только картинка плавает по шаблону http://ucozon.ru/dir/lentochka_k_9_maja_s_prava/8-1-0-1582

    Ответить

Оставь комментарий: