Давайте еще раз поговорим о фиксированном позиционировании IE6.

Автор：Eve Cole Время обновления：2010-11-12 15:43:53

Хорошо известно, что браузер IE6, выпущенный в 2002 году и в настоящее время являющийся основным в моей стране, не поддерживает фиксированный атрибут статического позиционирования CSS2. По этой причине проблемные интерфейсные инженеры изобрели различные решения:

1. Обычное решение на js

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

2. Используйте метод моделирования структуры и макета HTML.

Это решение когда-то использовалось 163 Блог 163 помещает весь контент в контейнер с высотой 100% и полосой прокрутки, установленной на автоматический режим, а затем устанавливает абсолютно позиционированный слой под ним, чтобы абсолютно позиционированный слой мог достигать a. статическое состояние. Принцип: полоса прокрутки, которую вы перетаскиваете, — это не вся перетаскиваемая страница, а контейнер, имитирующий всю страницу, поэтому области за пределами контейнера являются «стационарными». подробно:

Ниже приводится цитируемое содержание:

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<голова>
<стиль>
*{маржа:0}
тело{
высота: 1000 пикселей;
ширина: 1000 пикселей;
}
#а{
ширина: 300 пикселей;
высота: 100 пикселей;
фон: красный;
}

<скрипт>
вар isie6 = window.XMLHttpRequest?false:true;
window.onload = функция(){
var a = document.getElementById('a');
var d = document.getElementById('d');
если(isie6){
a.style.position = 'абсолютный';

window.onscroll = функция(){
d.innerHTML = '';
}
}еще{
a.style.position = 'фиксированный';
}
a.style.right = '0';
a.style.bottom = '0';
}

<тело>

тест

Визуальный эффект здесь идеален, но есть три проблемы:

1. Необходимо изменить структуру HTML (этот пункт не будет поясняться)

2. Ухудшает взаимодействие с пользователем: я пробовал этот метод раньше, но полоса прокрутки не остается на месте, когда я обновляю страницу, чего я терпеть не могу.

3. Уничтожьте некоторые события js, например, Cloudgamer упомянул, что оно уничтожит событие прокрутки окна. Здесь как минимум N многих инкапсулированных компонентов js могут быть признаны недействительными.

3. Беспрецедентное решение «метода очистки» с использованием метода Марса.

Этот принцип настолько причудлив, что я не могу его объяснить, а его применение слишком ограничено. Примеры см.:

Ниже приводится цитируемое содержание:

тест

4. Решение Expression plus с фиксированным фоном для нового использования старой технологии.

Это решение позволяет идеально визуально достичь статического позиционирования. пример:

Cloudgamer: эффект всплывающего слоя AlertBox (окно подсказки с информацией)

Мой предыдущий: «Простое решение для полноэкранной прозрачной маски (lightBox)»