Главная / CSS / Кроссбраузерная верстка /

Position:fixed в Internet Explorer

Пятница, 11 Декабрь 2009

Как то раз было необходимо на веб странице использовать position:fixed для формы обратной связи которая выезжает из правой стороны окна при клике на кнопку (jQuery). При этом у формы задается такой CSS:

#contactForm {   
  color:#FFFFFF;   
  left:0;   
  margin-left:-400px;   
  height:450px;   
  margin-top:-160px;   
  overflow:hidden;   
  position:fixed;   
  top:200px;   
 width:390px;   
 z-index:99; 
}

При этом в Opera, FF, Safari отображают этот блок как нужно, фиксируют его расположение относительно верхней точки окна. Но если посмотреть в эту страницу в IE (в любом) то данный фокус работать не будет! Этот блок будет зафиксирован относительно верхней точки контейнера в котором он находится (body), тем самым сдвинув все блоки которые идут после него на величину своей высоты, и никакого эффекта скольжения содержимого страницы под этим блоком вы не увидите.

Все дело в том что для IE необходимо абсолютное позиционирование, но тогда как быть с фиксацией блока?
Выход есть - это условные комментарии и expression - выражение, которое вставляется в стили и выполняет определенные расчеты.

#contactForm {
  position: absolute;
  top: expression(document.getElementsByTagName( 'body' )[0].scrollTop +200+ "px");
  width:390px;
  z-index:99;
  color:#FFFFFF;
  left:0;
  margin-left:-400px;
  overflow:hidden;
}

Таким образом блок позиционируется абсолютно но координата, по которой он позиционируется, пересчитывается с помощью expression. И еще для того чтобы этот блок не дрожал при прокрутке, а плавно скользил над всем содержимым страницы, необходимо для тега body добавить такие стили:

body {
  background: url('fakeimg.gif') no-repeat;
  background-attachment: fixed;
}

Для применения этих стилей только для IE необходимо заключить их
в условные комментарии, ниже! по отношению к основным стилям (с параметрами для этих элементов)
загружаемым на страницу:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

На случай сли DOCTYPE будет определен, следует использовать такой Expression:

#contactForm {top: expression(15+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');}

Метки:

Position:fixed в Internet Explorer

Похожие статьи:

Комментарии

Добавить комментарий