Lassen Sie uns noch einmal über die feste Positionierung von IE6 sprechen

Autor：Eve Cole Aktualisierungszeit：2010-11-12 15:43:53

Es ist bekannt, dass der IE6-Browser, der 2002 produziert wurde und derzeit in meinem Land der Mainstream ist, das von CSS2 festgelegte statische Positionierungsattribut nicht unterstützt. Aus diesem Grund haben die problematischen Front-End-Ingenieure verschiedene Lösungen erfunden:

1. Konventionelle js-Lösung

Dies ist die älteste und am weitesten verbreitete Lösung. Beispielsweise verwenden viele Couplet-Anzeigen, die der Bildlaufleiste folgen, diese Lösung. Der Nachteil besteht darin, dass das ziehende Bildlaufleistenelement sehr stark wackelt. Dies kann zwar durch Glätten verbessert werden, der Effekt ist jedoch immer noch nicht ideal. Was ich jedoch sagen möchte ist, dass die optische Wirkung dieser Lösung zwar etwas schlechter ist, über die Stabilität gibt es jedoch nichts zu sagen.

2. Verwenden Sie die HTML-Struktur- und Layoutsimulationsmethode

Diese Lösung wurde einst von 163 Blog verwendet. 163 legt den gesamten Inhalt in einen Container mit einer Höhe von 100 % und stellt die Bildlaufleiste auf „Automatisch“ ein und legt dann eine absolut positionierte Ebene darunter fest, sodass die absolut positionierte Ebene eine erreichen kann statischer Zustand. Prinzip: Die Bildlaufleiste, die Sie ziehen, ist nicht die gesamte Seite, die Sie ziehen, sondern der Container, der die gesamte Seite simuliert, sodass die Bereiche außerhalb des Containers „stationär“ sind. detailliert:

Nachfolgend der zitierte Inhalt:

<!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 ">
<Kopf>
<Stil>
*{margin:0}
Körper{
Höhe: 1000 Pixel;
Breite: 1000 Pixel;
}
#A{
Breite:300px;
Höhe: 100 Pixel;
Hintergrund:rot;
}
</style>
<Skript>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = 'absolut';

window.onscroll = function(){
d.innerHTML = '';
}
}anders{
a.style.position = 'fixed';
}
a.style.right = '0';
a.style.bottom = '0';
}
</script>
</head>
<Körper>
<div id="d" style="display:none;"></div>
<div id='a'>Test</div>
</body>
</html>

Der visuelle Effekt ist hier perfekt, es gibt jedoch drei Probleme:

1. Die HTML-Struktur muss geändert werden (dieser Punkt wird nicht erklärt)

2. Zerstört das Benutzererlebnis: Ich habe diese Methode schon einmal ausprobiert, aber die Bildlaufleiste bleibt nicht an Ort und Stelle, wenn ich die Seite aktualisiere, was ich nicht tolerieren kann.

3. Zerstören Sie einige JS-Ereignisse, wie Cloudgamer erwähnt hat, dass dadurch das Scroll-Ereignis des Fensters zerstört wird. Hier können mindestens N viele gekapselte JS-Komponenten ungültig gemacht werden.

3. Die beispiellose „Clearing-Methode“-Lösung mit der Mars-Methode

Das Prinzip ist so bizarr, dass ich es nicht erklären kann, und die Anwendung ist zu begrenzt. Beispiele finden Sie unter:

Nachfolgend der zitierte Inhalt:

4. Expression plus feste Hintergrundlösung für die neue Nutzung alter Technologie

Mit dieser Lösung kann eine statische Positionierung optisch perfekt erreicht werden. Beispiel:

cloudgamer: Effekt der AlertBox-Popup-Ebene (Informationsaufforderungsfeld).

Mein vorheriges: „Einfache Lösung für transparente Vollbildmasken (LightBox)“