IE 6 против позиции: фиксированный

Позиция: исправлено, что не работает для Internet explorer 6. Я действительно не могу понять исправления, найденные в google. Мне нужно, чтобы он работал в IE6, IE7, IE8 и FireFox 3.0.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Sidebar fixed</title>
    <style type="text/css">
    #wrapper {
        position:relative;
        width:900px;
        margin:0 auto 0 auto;
    }
    #sidebar_left {
        position:fixed;
        height:200px;
        width:200px;
        border:1px solid #000;
    }
    #sidebar_right {
        position:fixed;
        height:200px;
        width:200px;
        margin-left:700px;
        border:1px solid #000;
    }
    #content {
        position:absolute;
        height:2000px;
        width:480px;
        margin-left:210px;
        border:1px solid #000;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="sidebar_left">
            <p>Left sidebar</p>
        </div>
        <div id="sidebar_right">
            <p>Right sidebar</p>
        </div>
        <div id="content">
            <p>This is the content</p>
        </div>
    </div>
</body>
</html>
6 7
css internet-explorer-6

6 ответов:

Не поддерживайте IE6! Чем скорее люди прекратят взламывать сайты о IE6, тем меньше тяги у него будет и тем быстрее он умрет! Или добавьте этот код после первого блока стиля; 

<!--[if IE 6]>  
<style type="text/css">  
#sidebar_right, #sidebar_left {  
position:absolute; /* position fixed for IE6 */  
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');  
}  
</style>  
<![endif]-->
Результат не очень гладкий, но он работает.

Обновить

Я не слишком ясно представлял, как это должно использоваться; просто добавьте идентификатор (или класс) любых элементов, которые имеют "position: fixed" в список объявлений в начале вышеупомянутого блока, и они будут вести себя сами в IE6.

20

Да IE6 отстой. а вот и Хак...

_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

Это в основном говорит IE6 держать его абсолютно расположенным в левом верхнем углу, даже когда он прокручивается. это должно идти под остальной частью вашего css для элемента, поэтому он перегоняет его в IE6.

Вот он для вашего левого бара...

#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
5

Я только что протестировал это на ietester версии IE6, и это сработало отлично... Никакого Дрожания, Ууу!


Допустим, у вас есть элемент с классом box, например... 
.box {
    position: fixed;
    top: 0px;
    left: 0px;
}



Замените открывающий тег <HTML> на условные операторы IE...

<!--[if IE 6]> <html id="ie6"> <![endif]-->

И

<!--[if !IE]--> <html> <!--[endif]-->

Тогда как MatW & митчбрайсон предложил использовать "выражение" для моделирования фиксированной позиции.

Примечание: этот код идет после стили исходного элемента в CSS.

#ie6 .box { 
    position: absolute;
    top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
    left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}



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

Примечание: этот код идет в верхней части вашего CSS или после вашего стиля " HTML { }"в вашем CSS. 

#ie6 {
    background-image:url(about:blank);
    background-attachment:fixed;
}

По Томас Aylott @ SubtleGradient.com ,

"... Это заставляет обработки CSS, прежде чем страница перерисовывается. Так как он снова обрабатывает css перед перерисовкой, он будет идти вперед и обрабатывать ваши CSS выражения перед перерисовкой тоже. Это дает вам идеально ровное положение неподвижных элементов!""

ссылка на статью: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

Например, все вместе... 

<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->

<HEAD>
<STYLE>

#ie6 {
   background-image:url(about:blank);
   background-attachment:fixed;
}
.box {
   position: fixed;
   top: 0px;
   left: 0px;
}
#ie6 .box { 
   position: absolute;
   top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
   left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

</STYLE>
</HEAD>

<BODY>
    <div class="box"></div>
</BODY>

</HTML>
2

Нашел это решение, которое я подправил (в основном строки, которые я изменил, были: $('#sidebar_left').css ('top', document.функцию documentelement.scrollTop);): 

// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0

/********************************
*   (C) 2009 - Thiago Barbedo   *
*   - tbarbedo@gmail.com        *
*********************************/
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
            $('#sidebar_left').css('top',document.documentElement.scrollTop);
            $('#sidebar_right').css('top',document.documentElement.scrollTop);
        } else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
            $('#sidebar_left').css('top','299px');
            $('#sidebar_right').css('top','299px');
        }
    }
}

Он дрожит и выглядит плохо, но работает на всех браузерах, включая IE6.

0

Недавно я написал плагин jQuery, чтобы получить позицию: исправлена работа в IE 6+. Он не дрожит при прокрутке, он смотрит на возможности (не user-agent), работает в Internet Explorer 6, 7, 8.

Если вы используете строгий режим в позиции IE7+: fixed будет соблюдаться, но по умолчанию IE7 + работает в режиме Quirks. Этот плагин проверяет возможности браузера, и если он не соблюдает позицию: fixed, то он реализует jQuery исправить.

Http://code.google.com/p/fixedposition/

Что-то вроде этого может сработать для вас: 

$(document).ready(function(){
   $("#chatForm").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

Возможно, вам потребуется внести некоторые незначительные корректировки CSS, чтобы заставить его работать для вашего кода. Я работаю над" смещенными " значениями в качестве опций, как мы говорим.

0

Это можно сделать с помощью CSS-выражения, но с некоторым дополнительным хаком, чтобы получить плавную прокрутку: 

html, body {
    _height: 100%;
    _overflow: hidden
}
body {
    _overflow-y: auto
}
#fixedElement {
    position: fixed;
    _position: absolute; / ie6 /
    top: 0;
    right: 0
}
-1