Parlons à nouveau du positionnement fixe d'IE6

Auteur：Eve Cole Date de mise à jour：2010-11-12 15:43:53

Il est bien connu que le navigateur IE6, qui a été produit en 2002 et qui est actuellement le plus répandu dans mon pays, ne prend pas en charge l'attribut de positionnement statique corrigé de CSS2. Pour cette raison, les ingénieurs front-end en difficulté ont inventé diverses solutions :

1. Solution js conventionnelle

Il s'agit de la solution la plus ancienne et la plus utilisée. Par exemple, de nombreuses publicités en distique qui suivent la barre de défilement utilisent cette solution. L'inconvénient est que l'élément de la barre de défilement bouge très fortement. Bien qu'il puisse être amélioré grâce au lissage, l'effet n'est toujours pas idéal. Mais ce que je veux dire, c'est que même si l'effet visuel de cette solution est un peu moins bon, la stabilité n'a rien à dire.

2. Utiliser la structure HTML et la méthode de simulation de mise en page

Cette solution était autrefois utilisée par 163 Blog. 163 place tout le contenu dans un conteneur avec une hauteur de 100 % et la barre de défilement réglée sur automatique, puis définit un calque positionné de manière absolue en dessous, de sorte que le calque positionné de manière absolue puisse atteindre un état statique. Principe : La barre de défilement que vous faites glisser n'est pas la page entière que vous faites glisser, mais le conteneur qui simule la page entière, donc les zones en dehors du conteneur sont "stationnaires". détaillé:

Voici le contenu cité :

<!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 ">
<tête>
<style>
*{marge :0}
corps{
hauteur : 1 000 px ;
largeur : 1 000 px ;
}
#un{
largeur : 300 px ;
hauteur : 100 px ;
fond : rouge ;
}
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = fonction(){
var a = document.getElementById('a');
var d = document.getElementById('d');
si(isie6){
a.style.position = 'absolu';

window.onscroll = fonction(){
d.innerHTML = '';
}
}autre{
a.style.position = 'fixé';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</tête>
<corps>
<div id="d" style="display:none;"></div>
<div id='a'>test</div>
</corps>
</html>

L'effet visuel ici est parfait, mais il y a trois problèmes :

1. La structure HTML doit être modifiée (cet élément ne sera pas expliqué)

2. Détruit l'expérience utilisateur : j'ai déjà essayé cette méthode, mais la barre de défilement ne reste pas en place lorsque j'actualise la page, ce que je ne peux pas tolérer.

3. Détruisez certains événements js, tels que cloudgamer a mentionné qu'il détruirait l'événement de défilement de la fenêtre. Ici, au moins N de nombreux composants js encapsulés peuvent être invalidés.

3. La solution inédite de « méthode de compensation » utilisant la méthode Mars

Le principe est tellement bizarre que je ne peux pas l'expliquer, et l'application est trop limitée. Pour des exemples, voir :

Voici le contenu cité :

4. Expression plus solution d'arrière-plan fixe pour une nouvelle utilisation de l'ancienne technologie

Cette solution permet d'obtenir visuellement un positionnement statique parfaitement. exemple:

cloudgamer : effet de couche contextuelle AlertBox (boîte d'invite d'informations)

Mon précédent : "Solution simple de masque transparent plein écran (lightBox)"