IE 6 и позиция: исправлено

position:fixed, который не работает для 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>

css position fixed internet-explorer-6
person Cudos    schedule 02.07.2009    source источник

Ответы (6)


arrow_upward
20
arrow_downward

Не поддерживайте 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.

person Mathew    schedule 02.07.2009
comment
Работает очень хорошо! Но что, если у меня есть заголовок? Можно ли изменить его, чтобы перейти к началу, когда заголовок был передан? - person Cudos; 02.07.2009
comment
Не поддерживать IE6 легко сказать (я говорю это часто), но иногда у вас просто нет выбора. - person mbillard; 02.07.2009
comment
Заголовок должен работать просто отлично, так как этот код просто исправляет position:fixed для IE6, а не возится с вашим макетом каким-либо другим образом. Однако это хак, поэтому вы можете столкнуться с ситуациями, когда он сломается; это действительно будет зависеть от вашего окончательного макета. - person Mathew; 02.07.2009
comment
@Кроссбраузер. Я понимаю, что вы имеете в виду, но у вас всегда есть выбор... Если только клиент не приставит пистолет к моей голове или это не для интранета, специфичного для IE6, я буду спорить, пока мой голос не сломается! Переключение браузеров — это единственное, что может убить IE6, и мы единственные, кто может убедить бизнес сделать это. Лучший аргумент заключается в том, что сложные макеты требуют кодирования один раз (правильно, в соответствии со стандартами), а затем еще раз, чтобы заставить его работать для IE6; удалить IE6 и существенно сократить время (т.е. стоимость) разработки. - person Mathew; 02.07.2009
comment
Да, просто игнорируйте 15-20% посетителей сайта, это кажется хорошей бизнес-идеей. - person jeroen; 02.07.2009
comment
@jeroen, это огромное чрезмерное обобщение. Как вы можете сказать, какие браузеры используют его, мои или чьи-то еще посетители?! Неважно, какой эффект эти 20% окажут на бизнес. Если 20% ваших пользователей используют IE6, можно ли их убедить перейти? (т.е. они не привязаны к тому, что использует их компания). Если да, то почему бы не сделать им предложение, а не жаловаться на IE, а затем построить инфраструктуру, поддерживающую его? - person Mathew; 02.07.2009
comment
Чтобы уточнить, я не говорю, что поддержка IE6 неверна. Я просто делаю наблюдение, что если мы приложим столько же усилий к обучению наших клиентов и пользователей тому, насколько дрянной IE6, чем мы вложили в битву с IE6 в первую очередь, то проблема исчезнет. - person Mathew; 02.07.2009
comment
@MatW: Ну, он указал в вопросе, что ему нужна поддержка IE6 (как один из немногих, которые это делают), и на разных сайтах, от посольств и туристических агентств до психологов и виноделен, я см. от 15% до 20% использования IE6, причем это число достигает 40% на местных сайтах здесь, в Южной Америке (где почти все версии Windows незаконны...). В любом случае, я просто думаю, что ваше решение в порядке, но первый абзац очень неверен. - person jeroen; 02.07.2009
comment
Вероятно, мы все согласимся с тем, что IE6 — это кошмар для разработчиков. Проблема в том, что заказчики требуют, чтобы он работал в IE6. IE7+ и все другие браузеры имеют хорошие решения. - person Cudos; 03.07.2009
comment
@matW, в некоторых случаях невозможно не поддерживать IE6. Я работаю над большим веб-приложением, и наш основной клиент (2000 человек, использующих приложение) использует IE6. У нас нет способа сказать им, чтобы они обновились (им нужен IE6, чтобы использовать какое-то старое приложение для интрасети), особенно только для нашего приложения (О, эй, не могли бы вы потратить больше денег только для нас? kthxbai) - person marcgg; 24.11.2009
comment
Почему 0+ в этих выражениях? - person Gras Double; 17.03.2013

arrow_upward
5
arrow_downward

да 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');
}
person Community    schedule 02.07.2009
comment
Я забыл упомянуть, что в этом коде я использую хак с подчеркиванием для IE6. - person ; 02.07.2009

arrow_upward
2
arrow_downward

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


Допустим, у вас есть элемент с классом box, например...

.box {
    position: fixed;
    top: 0px;
    left: 0px;
}



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

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

и

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

Затем, например, MatW и mitchbryson предложили использовать «выражение» для имитации фиксированной позиции.

Примечание. Этот код следует за стилями исходного элемента в 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;
}

Согласно Томасу Эйлотту @ 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>
person Terry    schedule 12.05.2012
comment
У меня было серьезное дрожание, и это исправило это! +1 - person Talk nerdy to me; 12.05.2014

arrow_upward
0
arrow_downward

Нашел это решение, которое я подправил (в основном строки, которые я изменил, были: $('#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   *
*   - [email protected]        *
*********************************/
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.

person Cudos    schedule 03.07.2009
comment
Я предпочитаю метод css, даже несмотря на то, что он использует выражения, которые ЗАПРЕЩЕНЫ! в CSS по отношению к производительности. - person Jess Jacobs; 29.03.2011

arrow_upward
0
arrow_downward

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

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

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

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

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

Возможно, вам придется внести небольшие корректировки в CSS, чтобы заставить его работать с вашим кодом. Пока мы говорим, я работаю над значениями «смещения» в качестве вариантов.

person Chris Iona    schedule 10.01.2010

arrow_upward
-1
arrow_downward

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

html, body {
    _height: 100%;
    _overflow: hidden
}
body {
    _overflow-y: auto
}
#fixedElement {
    position: fixed;
    _position: absolute; / ie6 /
    top: 0;
    right: 0
}
person Kavian K.    schedule 29.04.2018
comment
ничего себе, отвечая на вопрос IE6 через 8 лет! У вас все еще есть IE6 ?? - person Temani Afif; 29.04.2018
comment
Я знаю, что это старый пост, но этот ответ может быть эффективным для любого. - person Kavian K.; 29.04.2018
comment
шутки в сторону? никто больше не использует IE6... последняя версия была 10 лет назад... а ВЫ? он у тебя есть или нет? - person Temani Afif; 29.04.2018
comment
Нет. Я им не пользуюсь, но вы уверены, что никто больше не использует IE6? - person Kavian K.; 29.04.2018
comment
и если вы опечалены ответом на старый вопрос, я могу удалить этот ответ. - person Kavian K.; 29.04.2018
comment
are you sure no one is using IE6 anymore? --› выполните поиск, и вы увидите ... но если вы не используете его, откуда вы знаете, что этот код будет работать? - person Temani Afif; 29.04.2018
comment
If you are saddened by answering an old question --› да, когда это очень-очень-очень старый вопрос, касающийся чего-то, что больше не используется, и вы даже не можете его протестировать, поскольку у вас нет IE6 ... мы всегда можем ответить на старые вопросы, но когда это полезно - person Temani Afif; 29.04.2018
comment
как вы знаете, что этот код будет работать? --› С IETester - person Kavian K.; 03.05.2018